ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
1.安装
全局安装:npm install -g babel-cli
查看版本号:webpack -v
2.转码过程
①创建一个Babel文件夹。
②初始化项目:打开cmd,cd到该文件夹下,通过npm init -y指令,生成一个package.json文件。
③在Babel文件夹下创建一个子文件夹命名为src,在src文件夹下存放需要转码的js文件。
④在Babel文件夹下创建一个子文件夹命名为.babelrc,写入转码规则:
{
"presets": ["es2015"],
"plugins": []
}
⑤安装转码器:cnpm install --save-dev babel-preset-es2015
⑥转码:babel src -d dist,在文件夹下生成了一个dist文件夹,里面存放了一个与之前js文件同名的js文件,即为转码为ES2015的文件。
3.自定义脚本
在package.json的scripts中添加命令,达到简化命令的效果,省去一串代码的繁琐。
如上文通过babel src -d dist来生成转码文件,现在我们只需要在scripts中添加"dev":"babel src -d dist",使用npm run dev即可执行。