文章目录
  1. 1. 说明
  2. 2. 配置文件.babelrc
  3. 3. 命令行转码 babel-cli
    1. 3.0.1. 基本用法
      1. 3.0.1.1. demo
  • 4. babel-node
  • 5. babel-core
  • 6. babel-polyfill
  • 7. webpack 和 babel 配置 react 开发环境
    1. 7.1. 1. 安装
    2. 7.2. 2. 建立 babel
    3. 7.3. 3.webpack 配置
  • 8. 补充:eslint
    1. 8.1. 1.安装
    2. 8.2. 2.eslint 结合 webpack 配置
    3. 8.3. 3.eslintrc.json 规则配置
    4. 8.4. 4.package.json 检查 eslint 语法
    5. 8.5. 5.eslint 结合 babel
      1. 8.5.1. 参考链接
      2. 8.5.2. userful links
  • 说明

    在 react 项目中使用ant-design的时候,配置import antd/dist/antd.cssbabel-plugin-import 插件并未成功导入,搞的很心烦,环境配置不通,此篇将 babel 的使用梳理一遍!!!

    配置文件.babelrc

    Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

    cmd 命令行创建

    1
    touch .babelrc

    该文件用来设置转码规则和插件,基本格式如下。

    1
    2
    3
    4
    {
    "presets": [],
    "plugins": []
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 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

    将规则写入.babelrc

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

    注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc

    命令行转码 babel-cli

    Babel 提供babel-cli工具,用于命令行转码。
    听阮老师的,在全局环境和当前项目环境都安装。

    1
    2
    3
    4
    5
    # 全局
    $ npm install --global babel-cli

    # 本地
    $ npm install --save-dev babel-cli

    基本用法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 转码结果输出到标准输出
    $ babel example.js

    # 转码结果写入一个文件
    # --out-file 或 -o 参数指定输出文件
    $ babel example.js --out-file compiled.js
    # 或者
    $ babel example.js -o compiled.js

    # 整个目录转码
    # --out-dir 或 -d 参数指定输出目录
    $ babel src --out-dir lib
    # 或者
    $ babel src -d lib

    # -s 参数生成source map文件
    $ babel src -d lib -s
    demo
    1. es6
    1
    2
    3
    4
    const arr = [1,2,3];
    arr.forEach(item=>{
    console.log(item+1)
    })
    1. .babelrc,使用es2015转码规则
    1
    2
    3
    4
    5
    6
    {
    "presets": [
    "es2015"
    ],
    "plugins": []
    }
    1. package.json 添加命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
    // ...
    "devDependencies": {
    "babel-cli": "^6.0.0"
    },
    "scripts": {
    "build": "babel src -d lib"
    },
    }

    最后,转码npm run build

    1
    2
    3
    4
    5
    6
    "use strict";

    var arr = [1, 2, 3];
    arr.forEach(function (item) {
    console.log(item + 1);
    });

    转码对应的在与 src 同级目录的 lib 目录下编译所有的文件。

    babel-node

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

    它不用单独安装,而是随 babel-cli 一起安装。然后,执行 babel-node 就进入 PEPL 环境。

    1
    2
    3
    $ babel-node
    > (x => x * 2)(1)
    2

    babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js,然后直接运行。

    1
    2
    $ babel-node es6.js
    2

    babel-node 也可以安装在项目中。

    1
    $ npm install --save-dev babel-cli

    然后,改写 package.json。

    1
    2
    3
    4
    5
    {
    "scripts": {
    "script-name": "babel-node script.js"
    }
    }

    上面代码中,使用 babel-node 替代 node,这样 script.js 本身就不用做任何转码处理。

    babel-core

    如果某些代码需要调用 Babel 的 API 进行转码,就要使用 babel-core 模块。

    安装命令如下。

    1
    2

    $ npm install babel-core --save

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var babel = require('babel-core');

    // 字符串转码
    babel.transform('code();', options);
    // => { code, map, ast }

    // 文件转码(异步)
    babel.transformFile('filename.js', options, function(err, result) {
    result; // => { code, map, ast }
    });

    // 文件转码(同步)
    babel.transformFileSync('filename.js', options);
    // => { code, map, ast }

    // Babel AST转码
    babel.transformFromAst(ast, code, options);
    // => { code, map, ast }

    配置对象 options,可以参看官方文档

    下面是一个例子。

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

    上面代码中,transform 方法的第一个参数是一个字符串,表示需要转换的 ES6 代码,第二个参数是转换的配置对象。

    babel-polyfill

    Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。

    举例来说,ES6 在 Array 对象上新增了 Array.from 方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用 babel-polyfill,为当前环境提供一个垫片。

    安装命令如下。

    1
    2

    $ npm install --save babel-polyfill

    然后,在脚本头部,加入如下一行代码。

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

    Babel 默认不转码的 API 非常多,详细清单可以查看 babel-plugin-transform-runtime模块的definitions.js文件。

    webpack 和 babel 配置 react 开发环境

    1. 安装

    1
    2
    $ npm install --save react react-dom
    $ npm install --save-dev babel-cli babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-plugin-transform-runtime
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    }

    2. 建立 babel

    创建 .babelrc 文件。

    1
    2
    3
    4
    5
    6
    {
    "presets": ["es2015", "stage-0"],
    "plugins": [
    ["transform-runtime"]
    ]
    }

    3.webpack 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ...
    module: {
    rules:[
    {
    test: /\.js[x]?$/,
    exclude: /node_modules/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['es2015', 'stage-0', 'react'],
    plugins: ['transform-runtime'],
    },
    },
    },
    ]
    }

    补充:eslint

    1.安装

    1
    2
    npm install eslint --save-dev
    npm install eslint-plugin-import eslint-config-airbnb-base --save-dev

    2.eslint 结合 webpack 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ...
    module: {
    rules:[
    {
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'eslint-loader',
    },
    ]
    }

    3.eslintrc.json 规则配置

    1
    2
    touch .eslintrc.json
    touch .eslintignore

    .eslintrc.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
    "extends": "airbnb-base",
    "env": {
    "browser": true
    },
    "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
    "jsx": true,
    "experimentalObjectRestSpread": true
    }
    },
    "rules": {
    "semi": 2,
    "no-console": 1,
    ...
    }
    }
    1
    npm install eslint-loader --save-dev

    4.package.json 检查 eslint 语法

    1
    2
    3
    4
    5
    6
    7
    ...
    "scripts": {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js"
    },
    ...

    5.eslint 结合 babel

    1
    npm install babel-eslint --save-dev

    然后创建或使用项目现有的 .eslintrc.json 文件并设置 parser 为 babel-eslint。.

    1
    2
    3
    4
    5
    6
      {
    + "parser": "babel-eslint",
    "rules": {
    ...
    }
    }

    参考链接

    文章目录
    1. 1. 说明
    2. 2. 配置文件.babelrc
    3. 3. 命令行转码 babel-cli
      1. 3.0.1. 基本用法
        1. 3.0.1.1. demo
  • 4. babel-node
  • 5. babel-core
  • 6. babel-polyfill
  • 7. webpack 和 babel 配置 react 开发环境
    1. 7.1. 1. 安装
    2. 7.2. 2. 建立 babel
    3. 7.3. 3.webpack 配置
  • 8. 补充:eslint
    1. 8.1. 1.安装
    2. 8.2. 2.eslint 结合 webpack 配置
    3. 8.3. 3.eslintrc.json 规则配置
    4. 8.4. 4.package.json 检查 eslint 语法
    5. 8.5. 5.eslint 结合 babel
      1. 8.5.1. 参考链接
      2. 8.5.2. userful links