babel 配置整理-CSDN博客

babel是一个JavaScript编译器,借助转换器可以使用最新的语法,而不必等待浏览器支持。但是只支持语法转换，而不支持新增 API。因此使用 babel 就分为两方面：语法转码和 API 支持。

安装

yarn add -D babel-cli babel-core babel-preset-env
复制代码

在 Web 项目根目录下，创建.babelrc 配置文件,配置

{ 
    "presets": ["env"] 
}
复制代码

这样一个基本的可用配置就好了。

语法转换

babel提供众多的转换包：

但是这样需要一个一个引入，比较繁琐又不好管理，因此提供了几个插件集成:

babel-preset-env是 babel 现在推荐安装的，默认等同于 babel-preset-latest = babel-preset-es2015 + babel-preset-es2016 + babel-preset-es2017；另外最新的提案包含在 stage-* 中最新提案连接

调整如下

yarn add -D babel-preset-stage-2
复制代码

.babelrc

{
  "presets": ["env","stage-2"],
}
复制代码

polyfill

polyfill是一种垫片,使用旧版本方法模拟出新的API,但不保证支持所有特性。目前有两种使用方法,一种是添加到全局环境中和增加原型方法;另外一种是作为一个library使用,不会污染全局环境和修改原型。幸好有人已经将其实现好了：core-js,对于不同的场景使用方法也不同(v2.5版本,最新版本已变动)：

浏览器引用完整编译 client
- core.js 所有特性
- shim.js 只包括标准代码
- library.js 包含所有特性,但是不污染全局环境
按需引入
- fn 文件夹中指定内容
- library 文件夹中指定内容,但是不污染全局环境
- 引入一系列相关的特性,比如 es6/array,包括 ES6 Array 所有特性
- 自定义引入 modules 文件夹下,但是需要有足够的了解

babel 引入了core-js的内容作为基础，提供了 babel-polyfill 和 babel-runtime 插件。

babel-polyfill，查看 babel-polyfill/lib/index.js 可以看到包含了 core-js/shim,regenerator-runtime/runtime,core-js/fn/regexp/escape, bable将这些内容统统打包进了 polyfill.js，因此使用时只需手动引入这一文件即可。
bable-runtime，babel-polyfill的缺点是打包后文件较大，并且污染了全局环境。如果采用按需引入的方案，就需要手动一个一个的引入，因此 babel 提供了babel-runtime插件,可以自动将引入。babel-runtime 的另一项功能是，babel提供了很多 helper 函数，默认情况下会添加进每个文件中,使用 babel-runtime 插件会从 babel-runtime 模块引入 helper 函数。

调整如下：

// babel-runtime 提供polyfill，babel-plugin-transform-runtime 作为自动引入polyfill的插件
yarn add babel-runtime 
yarn add -D babel-plugin-transform-runtime
复制代码

.babelrc

{
  "presets": ["env","stage-2"],
  "plugins": ["transform-runtime"]
}
复制代码

webpack配置babel

webpack作为主流的打包工具,配置babel是基本的操作。首先要安装babel-loader

yarn add -D babel-loader

webpack.config.js

module: {
    rules:[
    {
            test: /\.js$/,
            <!--引入的第三方模块不转码-->
            exclude: /node_modules/, 
            use: [{
                loader: 'babel-loader',
                options: {
                 <!--设置cache目录，加快转码速度，默认目录为 node_modules/.cache/babel-loader-->
                cacheDirectory: true,
                },
            }],
        },
    ]
},
<!--在开发模式下配置，通过chrome devtool/source/webpack-internal可以看到babel转码结果-->
devtool: 'cheap-module-eval-source-map',
复制代码

.babelrc

{
    "presets": [
    ["env", {
    <!--默认会将模块转换为commonjs, 设置为false 不转换-->
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": [transform-runtime"]
}
复制代码

eslint 配置 babel

.eslintrc.js 配置解析器

parser: 'babel-eslint'
复制代码

另外如果在webpack中配置eslint,还要保证eslint的检查在babel转码之前,配置如下

module: {
    rules:[{
        // 保证先于 babel-loader 执行
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
    }]
}
复制代码