Babel转码器（ES6）

待我称王封你为后i 2022-03-22 03:20 309阅读 0赞

> ##### 一、Babel介绍 #####

Babel(babeljs.io/)是一个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。也就意味着可以用ES6的方式编写程序，从而不用担心现有环境是否支持。如下例子：

//转码前
        input.map(item => item + 1);
        //转码后
        input.map(function (item) {
            return item + 1;
        });

> ##### 二、配置文件.babelrc #####

babel的配置文件是.babelrc,存放在项目的根目录下。使用babel的第一步就是配置这个文件。  
该文件用来设置转码规则和插件，基本格式如下：

{
            "presets":[],
            "plugins":[]
       }

presets字段设定转码规则，官方提供以下的规则集，可以根据需要进行安装。

# 最新转码规则
        $ npm install --save-dev babel-preset-latest
        
        # react 最新转码规则
        $ npm install --save-dev babel-preset-react
        
        # 不同阶段语提案的转码规则 （共有四个阶段）， 选装一个、
        $ npm install --save-dev babel-preset-stage-0
        $ npm install --save-dev babel-preset-stage-1
        $ npm install --save-dev babel-preset-stage-2
        $ npm install --save-dev babel-preset-stage-3

然后将这些规则加入.babelrc中。

{
            "presets":[
                "latest",
                "react",
                "stage-2"
        ],
            "plugings":[]
        }

注意：要想使用后面的所有babel工具和模块，都必须先写好.babelrc配置文件。

> ##### 三、命令行转码babelrc-cli #####

Babel提供babel-cli工具，用于命令行转码  
如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
上面图片中的代码是在全局环境下进行Babel转码的。这意味着如果项目要运行，全局环境中必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。  
一个解决办法是将babel-cli安装在项目之中，代码如下：

# 安装
    $ npm insatll --save-dev babel-cli

然后，改写package.json

{
          //...
          "devDependencies":{
             "babel-cli":"^6.0.0"
          },
          "scripts":{
             "bulid":"babel src -d lib"
          },
    }

转码的时候需要执行以下命令

$ npm run bulid

> ##### 四、babel-node #####

babel-cli工具自带一个babel-node命令，提供一个一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。  
babel-node不用单独安装，而是随babel-cli一起安装。执行babel-node可以进行REPL环境。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
在以上代码中，使用babel-node替代node，这样script.js本身就不用进行任何转码处理了。

> ##### 五、babel-register #####

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

$ npm install --save-dev babel-register

使用时，必须首先加载babel-register。

require("babel-register");
    require("./index.js");

这样就不用手动对index.js进行转码了。  
注意：babel-register只会对require命令加载的文件进行转码，而不会对当前文件进行转码。另外，由于它是实时转码，所以只适合在开发环境中使用。

> ##### 六、babel-core #####

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。  
安装命令如下：

$ npm install babel-core --save

然后，在项目中就可以调用babel-core了。

关于配置对象options的内容，可以参看官方文档，地址是babeljs.io/docs/usage/options/。

看以下示例。transform方法的第一个参数是一个字符串，表示需要被转换的ES6代码，第二个参数是转换的配置对象。

var es6Code = 'let x = n => n+1';
    var es5Code = require('babel - core')
        .transform(es6Code,{
          presets:['latest']
    })\
    .code;
    //'"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'

> ##### 七、babel-polyfill #####

babel默认只转新的JavaScript句法（syntax）,而不是转新的API,如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及定义在全局对象上的方法（如Project.assign）都不会转码。  
举例来说，ES6在Array对象上新增了Array.from方法，Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill为当前环境提供一个垫片。  
安装命令如下：

$ npm install --save babel-polyfill

然后，在脚本头部加入如下代码。

import 'babel-polyfill';
    //或者
    require('babel-polyfill');

> ##### 七、浏览器环境 #####

Babel也可用于浏览器环境。但是，从Babel6.0开始就不再直接提供浏览器版本而是要用构建环境构建出来。如果没有或不想使用构建工具，可以使用babel-standalone(github.com/Daniel15/babel-standalone)模块提供的浏览器版本，将其插入网页。

注意：网页实时将ES6代码转为ES5代码，对性能将会产生影响。生产环境下需要加载已转码的脚本。  
以下命令将代码打包成浏览器可以使用的脚本，以Babel配合Browserify为例。首先，安装babelify模块：

$ npm install --save-dev babelify babel-preset-latest

然后，再用命令行转换ES6脚本：

$ browserify script.js -o bundle.js \-t [babellify --presets[latest]]

以上代码将ES6脚本script.js转为bundle.js,浏览器直接加载后即可。  
在package.json中添加下面的代码，则不必每次输入参数。

{
      “browserify”:{
           "transform":[["babelify",{"presets":["latest"]}]]
       }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220322/4b4eed62f7d847d199d04e2323ca451b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220322/842f55c3c98745b1875f0b1c6e85e905.png