ES6 语法转化之 Babel-cli 插件的使用

时间:2021-08-07 17:10:49

在我们使用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 命令来进行转化了。