项目中babel的设置一团遭,确实有必要搞懂这个babel。有的项目中直接在配置文件.babelrc中配置好,有的在main.js中全局import 这个polyfill,有的是在webpack中配置,有的引入了大量的第三方babel插件,这样可不行啊,如果不对babel有个全面的认知,在面对这些一系列满眼的配置下去修改,就有点力不从心。 本文,抽丝剥茧,彻底的搞懂babel,并测试、去实践修改babe的配置。
{
"presets": [],
"plugins": []
}
接着我们在介绍这两个属性前,了解下babel的插件与预设的概念。
在继续上面的问题之前,这里我们需要深刻的晓得:babel的核心是插件,babel的所有工作都是由插件完成的。然后我们去查看babel的插件列表:https://babeljs.io/docs/en/plugins-list,部分截图如下
其中arrow-functions(也就是ES6的箭头函数)对应的插件是@babel/plugin-transform-arrow-functions 如果要使用这个插件,需要安装:npm install --save-dev @babel/plugin-transform-arrow-functions 这个插件作用就是将ES6的箭头函数转化为ES5写法。
进入到这个方法的详情页,如上图,我们看到:This plugin is included in @babel/preset-env 也就是说这个插件以及其他各种单个插件都放在了@babel/preset-env这个包中。之所以要included到一个里面,是因为我们总不能一个一个插件的安装引入,官方就提供了一个包: 嘿,兄弟,我把一些你们都会用到的一系列的插件包在一块,你们就不用单个安装了,只需要执行下面的命令: npm install --save-dev @babel/preset-env’
此时,这个preset-env(一系列插件的集合),安装好后,我们就可以去配置文件里面配置了。 【这个presets叫做“预设”:预设可以看成是一组插件或者配置项的集合。】
{
"plugins": [],
"presets": [
"@babel/preset-env"
]
}
垫片就是我们平时早已知道的babel-polyfill。 为什么引入了babel还需要引入babel-polyfill呢。 这是因为babel将ES6代码是分成了两种情况进行转换的:语法层和API层。
之前的项目中,我们的使用方式如下: 首先,我们需要安装它:
关于项目中使用polyfill,有好多种写法,我们这里需要对他们的每个写法都了然于胸,才会 知道如何真正优化配置。
type1:
在 node/React/Vue中使用,可能需要在入口文件最上层引入:
type2:
在webpack中可以通过配置文件加入: module.exports = { entry: [“@babel/polyfill”, “./app/js”], };
{
"plugins": [],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns":"usage",
"modules": false
}
]
]
}
这样引入polyfill,存在的一个问题是打出的包非常的大。 这里有一个很重要的配置 useBuiltIns : usage 它的含义是当我们在做polyfill填充的时候,在一些低版本不存在的特性的时候,并不会把全部加载,只是根据业务代码进行加载==》按需加载
看到一些资料说,引入的polyfill会污染全局变量,意思是别人如果使用了我们的类库,就可能造成这种问题,这里还未搞懂为什么会污染全局变量(暂且记下这个结论),按我的理解,如果我们是开发自己的项目,不会对外提供,那么是不是就不需要去解决这个问题?
总之,babel为了解决这个污染全局变量以及代码冗余的问题,为我们提供了一个插件@babel/plugin-transform-runtime
添加到配置文件中代码如下:
{
"plugins": [
["@babel/plugin-transform-runtime",{
"corejs":3
}]
],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns":"usage",
"modules": false,
"corejs":3
}
]
]
}
最后我们总结一下有关babel的几个包
Babel 是一个工具链,主要用于将采用ECMAScript 2015+ 语法编写的代码转换为向后兼容的JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。 这里的重点是这个 + 号,差不多的理解为: 所以现在的项目有些不会使用polyfiil,但不会出现问题,是因为写的ES代码几乎都没有什么新的特性,浏览器差不多都支持了,为了保险起见后续新API的标准推出,有的项目才会装这个polyfill 吧。