配置Babel处理ES高级语法

配置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"]
 }