在我们使用es6语法时,大部分语法在低版本浏览器上是不支持的,所以,我们需要借助第三方插件来转化es6语法,使得浏览器能够识别的语法。
通常使用babel插件来帮助我们转化es6语法:
1、在项目根目录使用 npm init -y 生成一个 package.json 文件。-y表示默认所有选项都同意。
2、 全局安装 babel-cli:
npm install -g babel-cli
3、本地安装babel-cli & babel-preset-es2015
npm install --save-dev babel-cli babel-preset-es2015
4、新建一个.babelrc文件并写入以下代码
{ "presets" : "es2015","plugins" : []}
5、使用 babel a.js -o b.js
命令就可以转化了(a.js是要转化的文件,b.js是转化后自动生成的文件)。
但是每次都使用 babel a.js -o b.js
这么长的命令转化,有点麻烦,有没有像webpack打包文件时使用 npm run build 就能将文件转化呢?有。打开我们的package.json文件,修改scripts属性为以下即可。
"scripts" : {"build" : babel a.js -o b.js}
这样我们就可以使用 npm run build
命令来进行转化了。