Webpack4.0基础教程二：ES6的babel转码配置

1.安装babel-preset-env包：npm install –save-dev babel-preset-env

2.在根目录下创建.babelrc文件：

{
 "presets": [
 "env"
 ],
 "plugins": []
}

3.为了检验我们的配置是否成功，我们再安装babel-cli包：npm install --save-dev babel-cli，然后我们在根目录下创建一个babel_test文件用于测试，如下：

--babel_test

----test.js

 

test.js:

let arr = [1, 2, 3];
console.log([...arr]);

并在package.json文件中添加npm脚本：

"scripts": {
 ...
 "build": "webpack",
 "babel": "babel ./babel_test/test.js -o ./babel_test/res.js"
}

该脚本的作用就是将test.js进行转码，并将转码后的内容存储到res.js文件中。

在终端执行npm run babel则会在相同目录下生成res.js:

"use strict";
 
 
var arr = [1, 2, 3];
console.log([].concat(arr));

该文件已经转码成功，说明我们的配置是正确的。