配置Babel处理ES高级语法
webpack只能处理部分ES6新语法,更高级的语法需要安装第三方loader
通过 Babel ,可帮我们将高级的语法转为低级的语法
需要运行如下两套命令,安装两套包,去安装 Babel相关loader功能:
1.1第一套包: cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
1.2第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D
2.在webpack.config.js的module节点下,rules数组中,配置新匹配规则:
2.1 {test:/.js$/,use:'babel-loader',exclude:/node_modules/}
2.2 注意在配置 babel 的loader规则的时候,必须把 node_modules 目录,通过 exclude排除掉,原因有两个:
(1)如果不排除掉node_modules ,Babel 会把node_modules中所有的js文件都打包编译,打包速度非常慢,会非常消耗CPU
(2)就算node_modules中所有的js文件都打包编译完毕,项目也无法正常运行
3.在项目的 根目录 中,新建 .babelrc 的配置文件,这个文件属于json格式,所以在配置.babelrc时,必须符合json规范:不能写注释,字符串必须用双引号
3.1 在.babelrc写如下的配置:
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}