由于新版本的ECMASscript的强大特性,使我们写js代码更加得心应手,例如:calss,let,for…of,promise等等,但可惜的是这些js新特新只被最新版本的浏览器支持,那么指定范围的低版本的浏览器的支持就需要一个专门的工具,babel就是这样的一块前端工具。
但是babel系列的插件现在越来越多,对于初次接触使用它的人来说需要花费不少的时间,尤其是讨厌英文的人。
babel-6已经放弃了原来的babel包,取而代之的是各种转换插件,刚开始,我也很纳闷,为什么要分这么多插件包呢,原先的一个不好吗?随着使用我么发现,这些插件的职责分明,避免了‘一刀切’的问题,不管你需不需要都给你编译。
babel-loader
这个包是由babel团队开发的loader,用来告诉webpack我想要对我的js代码进行兼容性编译。
babel-loader
只是起到一个通知者的角色,通知babel你需要干活了,在webpack的module中使用代码如下:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 不对node_modules目录下的文件进行编译,可以提升webpack打包速度,其他loader也有这个配置
use: {
loader: 'babel-loader',
// loader: 'babel-loader?cacheDirectory', // 使用缓存目录它可以进一步提升webpack的编译速度
options: { // 这个配置项我们一般单独拿出来,创建一个‘.babelrc’文件来单独存放配置项
presets: ['@babel/preset-env'],// babel预设
plugin: ['@babel/plugin-proposal-object-rest-spread'] // 所需要使用的插件
}
}
}
]
}
babel-core
如果说 babel-loader
是告诉webpack我要对js文件进行代码兼容性编译,那么,webpack接下来就是要找babel,而bable的入口就是 babel-core
,只有通过它,webpack才能使用各种babel的api(前提是你安装了相关的api)。
babel-preset-es* 和 babel-preset-stage-*
babel-preset-es2015
,babel-preset-es2016
,babel-preset-es2017
等等傻傻的分也分不清楚。
这些预设将支持ES6新语法的兼容性编译。
将代码转化为 ES3
babel-preset-es3
将代码转化为 ES5
'babel-preset-es2015' ,