webpack系列---babel的配置

webpack中只能处理部分es6语法，一些高级语法或者es7语法webpack是不能正常编译的，如下

代码语言：javascript复制

//测试es6
class Person{
   static info = {name:"test"}
}

编译报错

为此我们要通过Babel解决

Babel使用步骤

1.下载babel转换工具 cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

2.下载语法转换工具，将es6语法转换为浏览器能识别的JS cnpm i babel-preset-env babel-preset-stage-0 -D

3.在项目根目录新建 .babelrc文件，在此文件配置语法和转换工具

代码语言：javascript复制

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

4.在webpack.config.js中配置js文件的loader

代码语言：javascript复制

.
.
.
 module:{
         rules:[
            .
            .
            .
            {
                test:/.js$/,use:'babel-loader',exclude: /node_modules/
            }
         ]
     }
 }

这里我们多设置了一个配置项 exclude该配置指定node_modules下的文件不编译，因为node_modules下的文件已被编译好了

上述操作完成后我们再次编译 浏览器正常解析

webpack 打包 javascript babel.js ecmascript

0 人点赞