Babel的使用方法

发表于 分类于

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

使用命令行转码

  • 安装babel-cli：npm install --global babel-cli

  • 使用：

    • 转码结果输出到标准输出：babel compiled.js
    • 转码结果写入一个文件：babel source.js -o compiled.js
    • 整个目录转码：babel src -d lib
    • 生成source map文件：babel src -d lib -s

  • 在package.json中使用babel-cli

    • 在项目中安装babel-cli：npm install --save-dev babel-cli

    • 在package.json中进行配置（使用npm run build就可以进行babel转码）：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      {
        // ...
        "devDependencies": {
          "babel-cli": "^6.0.0"
        },
        "scripts": {
          "build": "babel src -d lib"
        },
      }
安装和注册

  • 安装

    • ES2015转码规则
      npm install –save-dev babel-preset-es2015

    • react转码规则
      npm install –save-dev babel-preset-react

    • ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
      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

      如果是想使用比较新的语法时，比如ES7中的async/await语法，选择安装stage-3是比较稳妥的。在安装好之后，需要在Babel的配置文件中进行注册，在项目的根目录下新建.babelrc文件并进行配置：

      1
      2
      3
      4
      5
      6
      7
      8
      {
          "presets": [
            "es2015",
            "react",
            "stage-2"
          ],
          "plugins": []
      }
webpack配置babel

  • 安装：安装方式仍如上一步npm安装方式

  • 配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    //webpack1.0
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel",
                query: {
                  presets: ['es2015', 'stage-3']
                }
            },
        ]
    }

    //webpack3.0，preset如果已经在package.json中指定（`babel:{"presets": ["lastest"]}`），这里可以不用配置
    module: {
    	rules: {
    		{
    			test: /\.js$/,
    			use: 'babel-loader',
    			exclude: /(node_modules|bower_components)/,
    		}
    	}
    }
开发环境使用babel-register

babel-register的作用是在模块使用require命令进行引入时，对该命令引入的模块进行babel的转码（只要是js/jsx/es/es6类型文件）：

  • 安装babel-register：npm install --save-dev babel-register
  • 加载babel-register：require("babel-register");require("./index.js");，即可对index.js进行转码（注意：register不会对当前js文件进行转码）
使用babel-core的API进行转码

  • 安装：npm install babel-core --save

  • 使用：

    1
    2
    3
    var babel = require('babel-core');
    // 字符串转码
    babel.transform('code();', options);
babel-polyfill

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

例如之前在学习koa2的过程中，遇到了async/await的情况，就必须安装polyfill才能够正常加载。