babel使用基础介绍

Myth丶恋晨 2022-04-10 05:50 253阅读 0赞

参考文章：  
[https://www.cnblogs.com/lsgxeva/p/7758184.html\#undefined][https_www.cnblogs.com_lsgxeva_p_7758184.html_undefined]  
[http://www.ruanyifeng.com/blog/2016/01/babel.html][http_www.ruanyifeng.com_blog_2016_01_babel.html]  
[https://segmentfault.com/a/1190000011155061\#articleHeader17][https_segmentfault.com_a_1190000011155061_articleHeader17]  
[https://github.com/easonyq/easonyq.github.io/blob/master/学习记录/others/babel.md][https_github.com_easonyq_easonyq.github.io_blob_master_others_babel.md]

博客讲解内容如下：

*  1、babel是什么
 *  2、javascript制作规范
 *  3、babel转译器
 *  4、babel的使用
 *  5、常见的几种babel转译器和插件
 *  6、babel最常见配置选项
 *  7、babel的其他
 *  8、在webpack中使用babel
 *  9、总结

**1.babel是什么**

babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

**2.JavaScript制作规范**

因为版本都是向前兼容的，就是老版本js版本中规定的语法和api在新版本的js中同样也会合理的。所以我们可以想到后面的规范肯定是包含前面的规范的，也就是ES2016版本的js规范是包含ES2015(ES6)规范的，ES2017是包含ES2016的也包含ES2015的。针对不同的规范，Babel也提供了对应的转换器。

babel-preset-es2015 将es2015版本的js转译为es5。

babel-preset-es2016 将es2016版本的js转译为es5。

babel-preset-es2017 将es2017版本的js转译为es5。

**在转译过程中遇到更高版本的js语法，babel是会直接忽略的。**

js规范的制作分4个阶段。

*  Stage0 ：任何尚未提交为正式提案的讨论，想法。
 *  Stage1 ：此阶段，稻草人草案升级为正式化的提案，并将逐步解决多部门关切的问题，如与其他提案的相互之间会有什么影响，这一草案具体该如何实施等问题。
 *  Stage2 ：此阶段，草案就有了初始的规范。通过polyfill（打补丁。编写一些代码实现浏览器之前不支持的功能），开发者可以开始使用这一阶段的草案了，一些浏览器引擎也会逐步对这一阶段的规范的提供原生支持，此外通过使用构建工具（类似babel的工具）也可以编译源代码为现有引擎可以执行的代码，这些方法都使得这一阶段的草案可以开始被使用了。
 *  State3 ：此阶段的规范就属于候选推荐规范了，这一阶段之后变化就不会那么大了。
 *  Stage4 ：此阶段的提案必须有两个独立的通过验收测试的实现，进入第4阶段的提案将包含在 ECMAScript 的下一个修订版中。

针对js规范的不同阶段，babel也提供了对应的转译器

Stage0：preset-stage-0

Stage1：preset-stage-1

Stage2：preset-stage-2

Stage3：preset-stage-3

**不同阶段的转译器之间是包含的关系，preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件，同样preset-stage-1转译器除了包含preset-stage-2的全部功能外还增加了一些额外的功能……。**

**3.babel转译器**

为了便于说明，首先我们来定义两个概念。

1.转译插件，转译插件是用来转译单一功能的插件，比如transform-es2015-arrow-functions，这个插件只负责转译es2015新增的箭头函数。

2.转译器，转译器是一系列转译插件的集合。比如babel-preset-es2015就包含了es2015新增语法的所有转译插件，比如包含transform-es2015-arrow-functions（es2015箭头函数转译插件）、transform-es2015-classes(es2015 class类转译插件)等。

js规范新增的每个语法都有对应的babel插件，因此babel插件众多。为了便于管理，会把某些插件集合在一起，构成一个转译器。

babel的转译器根据用途的不同也分了不同给的类，这些类非常多，所以babel看起来很混乱。不过大体上babel的转译器分为3类。

*  1.语法转译器，这些转译器只负责转译js最新的语法，并不负责转译js新增的api和全局对象。这类转译器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等，以后肯定还会有新的转译器加入，不过你只要理解转译器就是一堆转译插件的集合就可以了。
 *  2.补丁转译器，这些转译器只负责转译js最新的api和全局对象。比如浏览器不支持String新增的String.padStart方法和Promise全局对象。通过babel-profill转译，我们可以通过其他代码来让浏览器实现类似String.padStart和Promise的功能。
 *  3.jsx和flow插件，这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为babel-preset-react

另外你可以对babel已有的转译器进行改造或者创建新的转译器。

**4.babel的使用**

babel支持的使用场景非常多，可以在浏览器中使用（browser）也可以在命令行（cli），还可以是我们常见的gulp和webpack中。

4.1创建babel项目

在本地磁盘上创建一个文件夹es6（名字任意），在该文件夹下打开命令行工具，初始化项目。

D:\webpack\demo\es6>npm init -y

这个命令目的就是创建一个默认的package.json文件。

4.2本地安装babel命令行工具

安装babel的命令行工具的目的是为了在命令行使用babel。

babel命令行工具可以全局安装也可以本地安装，官方文档推荐本地安装，原因有2点；

1.本地安装不同的项目可以使用不同版本的babel，你也可以单独对某个项目的babel进行升级等操作

2.每个项目单独安装的意味着对计算机环境没有依赖，便于移植

在命令行中继续执行如下命令

npm install --save-dev babel-cli

如果你已经全局安装了babel，可以使用如下的命令进行卸载

npm uninstall --global babel-cli

这样就已经在本地安装好babel了。

此时我的package.json文件如下（请忽略main字段）。

{
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "arrow.js", //请忽略main字段
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.24.1"
      }
    }

4.3在命令行中调用babel

本地安装的babel是不能够在直接命令行中运行的，为了在命令行中运行babel，我们有两个方法，

1.是需要配置下package.json文件的scripts项。比如如下代码，配置了一个build命令，运行该命令`(npm run build)`的时候就会在命令行执行`babel src -d lib`

{
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "arrow.js",
      "scripts": {
        "build": "babel src -d lib"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.24.1"
      }
    }

第2个方法是你需要可以进入node\_modules文件夹，再进入.bin文件夹，然后执行在命令行中执行babel src -d lib。

推荐使用npm run build的方法。

这里需要解释babel src -d lib这个命令的意思。这个命令目的是把src文件夹下的文件都转译，转译后的文件放到lib目录下。

ps:此时无论你是运行npm run build 还是运行babel src -d lib命令（其实两个方法本质上都是一样的，都是运行babel src -d lib）命令行都会报错，原因是现在还没有src文件夹。可以先不用管它，稍后我们再新建src文件夹。

4.4创建.babelrc配置文件

在cmd中键入以下命令。

D:\webpack\demo\es6>type nul>.babelrc

这个时候你的文件夹里就多了一个.babelrc文件了。windows是不能直接创建空文件名的文件的，所以必须通过命令行创建。

4.5安装babel的转译器

这里我们以babel-preset-env为例。

在命令行中执行如下代码就会安装babel-preset-env转译器。

D:\webpack\demo\es6>npm install babel-preset-env --save-dev

注意：babel命令行工具（babel-cli）跟babel转译器是两个不同的东西，命令行工具并不具有转译代码的功能，只是为了在命令行中使用babel。要转码必须安装转译器，比如babel-preset-env转译器或者babel-preset-react转译器。**要转译的时候，还要在.babelrc文件或者命令行中配置这些转译器(presets)选项**

4.6配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。

.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行 `babel src -d lib --presets=env`等价于在.babelrc中配置 `"presets":["env"]`。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，**直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用这些配置选项来转译代码**。

*  1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也没有配置–presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。
 *  2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错
 *  3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准

{
        "presets":["env"]
    }

package.json文件主要是描述description信息和配置，webpack.config.js是说明使用方法。

4.7babelrc的替代方案

如果你不想生成.babelrc文件，你可以在你的package.json文件中对babel进行配置。如果你使用gulp或者webpack之类的管理工具的话，也可以在这里工具的配置选项里添加babel的配置选项。

以下以在package.json中配置为例。

{
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "arrow.js",
      "scripts": {
        "build": "babel src -d lib --comments=true"
      },
      "babel":{
        //babel选项
        "presets":["es2015"],
        "comments":false
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "webpack": "^3.2.0"
      }
    }

在package.json中配置babel等同于使用.babelrc文件

4.8 编写es6代码

4.9转译es代码

**5.常见的几种babel编译器和插件**

经过上面的步骤我们已经完成了转译代码的工作，现在我们介绍下babel中常用的转译器和配置选项。

5.1 babel-preset-env

转译器，最常用的转译器。通过在.babelrc中配置env选项，可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了，不支持的才转译。如果不配置env选项，该转译器等同于babel-preset-latest。

{
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "safari >= 7"]
          }
        }]
      ]
    }

5.2babel-preset-es2015

5.3babel-preset-latest

5.4babel-preset-react

5.5兼容ie浏览器的转译器

es3-member-expression-literals

es3-property-literals

es5-property-mutators

5.6总结

转译器就是一堆转译插件的集合。babel转译器很多，但是我们常用的就那几个。如果要转译新版本的js的话，只需要使用babel-presets-env这一个转译器就可以了。

**6.babel最常见配置选项**

babel的配置选项在命令行的使用规则是babel --name-value 比如我们使用es2015转译器，我们的命令就是

babel src -d lib --presets=es2015

这里只介绍几个常见的babel的配置选项。

6.1 babelrc

默认值为true，用于配置是否适用.babelrc和.babelignore文件，当命令行中添加–no-babelrc选项的时候，表示忽略.babelrc和.babelignore文件。在.babelrc文件中配置babelrc个人测试没有卵用。

6.2 env

6.3 ignore

==6.4 minified ==

6.5 plugins

6.6 presets

6.7 plugins和presets的顺序

如果同时存在plugins和presets，则先使用plugins转译

plugin的调用顺序是从第一个到最后一个，

presets的调用的顺序是相反的，从最后一个到第一个

**7.babel其他**

7.1 babel-node

bable-node是babel-cli自带的命令，提供了一个支持ES6的REPL环境，它支持node的REPL环境的所有功能，而且可以直接运行ES6代码。

7.2babel-register

babel-register模块会改写require命令，为它加上一个钩子。此后每当使用require加载.js、.jsx、.es、.es6后缀名文件的时候，都会先用babel进行转码

7.3 babel-core

babel-core主要在node等环境中使用，可以用来开发自己的babel转译器。直接调用babel的api对某些代码或者某些文件进行转译。

**8.在webpack中使用babel**

package.json

{
      "name": "es6-webpack",
      "version": "1.0.0",
      "description": "es6 webpack init project",
      "main": "index.js",
      "scripts": {
        "watch": "webpack --watch",
        "start": "webpack-dev-server --open"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/cucygh/es6-webpack.git"
      },
      "author": "",
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/cucygh/es6-webpack/issues"
      },
      "eslintConfig": {
        "root": true,
        "parserOptions": {
          "ecmaVersion": 2017
        },
        "extends": [
          "mysticatea",
          "mysticatea/modules"
        ],
        "plugins": [
          "html"
        ],
        "env": {
          "browser": false
        },
        "globals": {
          "applicationCache": false,
          "atob": false,
          "btoa": false,
          "console": false,
          "document": false,
          "location": false,
          "window": false
        },
        "parser": "babel-eslint"
      },
      "eslintIgnore": [
        "node_modules",
        "webpack.config.js"
      ],
      "babel": {
        "presets": [
          "env"
        ]
      },
      "homepage": "https://github.com/cucygh/es6-webpack#readme",
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-eslint": "^8.0.3",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.1",
        "clean-webpack-plugin": "^0.1.17",
        "eslint": "^3.19.0",
        "eslint-plugin-babel": "^4.1.2",
        "eslint-plugin-html": "^4.0.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "html-loader": "^0.5.1",
        "html-webpack-plugin": "^2.30.1",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.9.5"
      },
      "dependencies": {
        "babel-polyfill": "^6.26.0",
        "eslint-config-mysticatea": "^12.0.0"
      }
    }

webpack.config.js

package.json文件主要是描述description信息和配置，webpack.config.js是说明使用方法。

**9.总结**

关于babel的知识点大概就这些。

1.  babel常用的转译器是babel-preset-env。
2.  常用的配置选项是plugins和presets
3.  常用的使用场景是在webpack中

[https_www.cnblogs.com_lsgxeva_p_7758184.html_undefined]: https://www.cnblogs.com/lsgxeva/p/7758184.html#undefined
[http_www.ruanyifeng.com_blog_2016_01_babel.html]: http://www.ruanyifeng.com/blog/2016/01/babel.html
[https_segmentfault.com_a_1190000011155061_articleHeader17]: https://segmentfault.com/a/1190000011155061#articleHeader17
[https_github.com_easonyq_easonyq.github.io_blob_master_others_babel.md]: https://github.com/easonyq/easonyq.github.io/blob/master/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/others/babel.md