webpack-babelrc

发表于 | 分类于

.babelrc的基本配置

​ ES6引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for…of promise等等这样的，但是这些js新特性只被最新版本的浏览器支持，低版本浏览器并不支持，babel可以把es6代码转换成低版本浏览器能识别的代码。可以理解为 babel是javascript语法的编译器。

Babel编译器

​ 在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。.babelrc配置文件一般为如下：

1
2
3
4
5
6
7
8
9
10
{
    "plugins":[
        ["transform-runtime",{"polyfill":false}]
    ],
    "presets":[
        ["env",{"moudules":false}],
        "stage-2",
        "react"
    ]
}

plugins

​ 该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码，babel默认只转换新的javascript语法，而不转换新的API，比如Iterator、Promise、Set、Map等，还有Object、数组、字符串原型上新增的方法。因此我们需要使用 babel-polyfill和babel-runtime这样的插件来完成转换。

  • babel-polyfill 的原理是如果当前环境没有实现这些API，它会做兼容处理，向js中原有对象的原型prototype添加，但是这样做但造成一定全局污染
  • babel-runtime是将es6编译成es5去执行，它不会影响全局变量。但我们需要针对每个API做引用，如Promise就需要import Promise from 'babel-runtime/core-js/promise' 但是这样手动加入会很麻烦，因此我们通常使用babel-plugin-transform-runtime 避免手动引入 import的痛苦，并且它还做了公用方法的抽离。比如说我们有100个模块都使用promise，但是promise的polyfill仅仅存在1份。

理解 babel-plugin-transform-runtime 的配置一些选项

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"plugins":[
        [
            "transform-runtime",
        	{
               "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
            }
        ]
    ]
}

配置项可以看官网，查看官网

  • helpers: 默认值为true，表示是否开启内联的babel helpers(即babel或者环境本来存在的某些对象方法函数)如：extends，etc这样的
    在调用模块名字时将被替换名字。

  • polyfill：默认值为true，表示是否把内置的东西(Promise, Set, Map)等转换成非全局污染的。

  • regenerator：默认值为true，是否开启generator函数转换成使用regenerator runtime来避免污染全局域。

  • moduleName：默认值为 babel-runtime，当调用辅助 设置模块（module）名字/路径.

presets

​ presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合。

babel-preset-env

babel针对每个版本的es语法都有对应的解决方案

babel-preset-es2015: 可以将es6的代码编译成es5.
babel-preset-es2016: 可以将es7的代码编译为es6.
babel-preset-es2017: 可以将es8的代码编译为es7.
babel-preset-latest: 支持现有所有ECMAScript版本的新特性。

随着时间的推移，将来可能会有跟多的版本插件，于是babel-preset-env 产生了，它可以根据目标环境自己选择编译。我们只需在.babelrc文件简单配置即可

1
2
3
{
  "presets": ["env"1]
}

babel-preset-env 中的选项配置

  • targets: {[string]: number | string }, 默认为{};含义是支持一个运行环境的对象，比如支持node版本；可以如下配置： node: ‘6.0’;

  • targets.browsers 支持浏览器的配置项，该配置项使用方式可以到 browserslist来查询

  • modules 该参数的含义是：启用将ES6模块语法转换为另一种模块类型。将该设置为false就不会转换模块。默认为 ‘commonjs’. 其他取值’amd’ | ‘umd’ | ‘systemjs’ | ‘commonjs’ | false，一般设为false

在webpack中配置babel

​ 由于babel所做的事情是转换代码，所有需要使用loader去转换，因此我们需要配置babel-loader。安装babel-loader之前，我们需要安装babel-core， 因为babel-core是Babel编译器的核心。

1
npm install --save-dev babel-core

然后我们再安装 babel-loader, 命令如下：

1
npm install --save-dev babel-loader

接着安装语法转换插件 babel-preset-env, babel-plugin-transform-runtime, babel-preset-stage-2, 

1
npm install --save-dev  babel-preset-env babel-plugin-transform-runtime babel-preset-stage-2

.babelrc 配置如下即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2"
  ]
}

webpack配置中需要添加 babel-loader 配置

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  }
}

这样打包后，浏览器就可以运行es6代码了

-------------本文结束感谢您的阅读-------------