美文网首页
Babel浅谈

Babel浅谈

作者: 前端切克闹 | 来源:发表于2021-01-03 21:18 被阅读0次

BABEL

ES6语法在部分浏览器上,并不支持,而开发人员心里想着尝鲜ES6,鱼与熊掌无法兼得。
面对选择:要ES6还是要浏览器支持,成年人表示2个都要。
这就需要找到一个可以转ES6为ES5的方法,这就是我们今天了解的主角-BABEL
BABEL是一种JAVASCRIPT的编译器,能够把输入的代码转成另外一套输入的代码。


其实做ES6转为ES5 只是其中一个应用场景,只要涉及到代码转化的,都可以用到BABEL

BABEL转化过程

BABEL转化的步骤,简单说就三步

转化步骤
  • 代码转为AST树
    AST树类似JS对象,通过对象方式来表达代码结构,方便第二步的修改。
function square(n) {
  return n * n;
}

上面 这段代码就被转化为如下的AST树


AST树

AST树中每一层结构称之为节点,每个节点都有type声明节点类型
如上图,我们看到有FunctionDeclaration,BlockStatement,ReturnStatement,Identifiersi 等4种节点类型

我们可以通过 https://astexplorer.net/ 来对 AST 节点有一个更好的感性认识
我们可以通过 https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions 来了解节点类型对应的属性

  • AST树修改
    修改AST树的,BABEL本身不做处理,而是交付给众多的插件来做处理,BABEL本身只做插件调用
代码转化需求千奇百怪,BABEL本身肯定无法覆盖,通过调用插件的方式比较合理,这就类似微信只做平台,服务是靠接入类似

BABEL提供了很多官方插件,当然它也提供对应API可以自定义插件开发
如:
@babel/plugin-transform-arrow-functions 来做箭头函数的转化
@babel/plugin-transform-parameters 来做参数解构
@babel/plugin-transform-spread 来处理扩展预算符

我们使用配置文件的话,如下:

{
  plugins:[
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-spread"
  ]
}
插件的开发是基于节点访问,类似事件回调开发,下次再发文详细说下插件开发

我们上述使用了3个ES6功能,就要使用3个插件,如果过程中用了其他ES6语法,我们又没有在配置文件添加对应的语法,这就没有完成对应的转化,而且在配置文件里要写一大堆的插件也是麻烦,有没有其他便捷的办法呢?

答案是有的,这就是Preset预设

预设可以理解为一系列插件的集合,引入一个预设,就相当于引入一系列的插件。
我们经常使用的就是@babel/preset-env

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
      }
    ]
  ]
}

简单的预设开发如下


image.png
  • AST树转代码
    这是第一步的逆向步骤,BABEL内部做好了封装,我们可以不用理解

相关文章

  • 浅谈Babel

    前几天遇到一个用户反馈说页面打不开的问题,而且还是其中两个页面,其他的都没有问题,于是就要来了账号自己登陆一下看看...

  • Babel浅谈

    BABEL ES6语法在部分浏览器上,并不支持,而开发人员心里想着尝鲜ES6,鱼与熊掌无法兼得。面对选择:要ES6...

  • babel配置及插件注解

    babel插件 @babel/cli @babel/core @babel/preset-env @babel/p...

  • babel插件入门-AST

    目录 Babel简介 Babel运行原理 AST解析 AST转换 写一个Babel插件 Babel简介 Babel...

  • webpack学习四(babel)

    babel-loader安装 npm i babel-loader @babel/core @babel/pres...

  • webpack4.x + react启用 jsx 语法?

    安装 babel 插件运行cnpm i babel-core babel-loader babel-plugin-...

  • react 使用 jsx语法

    安装 babel 插件 运行cnpm i babel-core babel-loader babel-plugin...

  • react webpack配置

    babel编译jsx babel-loader;webpack调用babel的桥梁@babel/core;babe...

  • babel学习笔记

    babel 转译 安装以下依赖: @babel/core调用 Babel 的 API 进行转码 babel-loa...

  • 2022-01-07 webpack中babel的使用

    安装依赖 @babel/core babel的核心依赖 @babel/preset-env babel的预置环境,...

网友评论

      本文标题:Babel浅谈

      本文链接:https://www.haomeiwen.com/subject/mejpoktx.html