为什么需要Babel插件
这是对ES5之后的版本升级,再ES5之后统称为ES6,新加入了许多语法,使得在浏览器上的兼容性变得差强人意,但可以很好的运行在node.js上,但是又不能进行dom和ajax操作,所以在使用es6语法的时候需要先将es6语法转换为es5语法,然后再运行再浏览器上,使之兼容性变得良好.
下载babel插件,转换es6代码
-
首先需要node.js环境
在dos窗口可以通过
查看node版本
如果没有可以在官网下载安装 -
在该目录下新建一个文件夹
-
在该文件夹中 >npm init 将该文件夹初始化成一个node.js项目
-
在该文件夹中新建一个a.js文件,编写es6代码
-
本地安装 在当前目录下 >npm install --save-dev babel-cli
下载完成之后>babel --version查看版本号
如果出现说明下载完成 -
安装预设
npm install --save-dev babel-preset-latest
预设为es6转换为es5 -
在该文件夹下新建并配置.babelrc文件
{
“presets”:[“latest”]
} -
将a.js文件转换为ES5之后生成一个b.js文件
babel a.js --out-file b.js
将多个js文件转换为ES5语法
babel src --out-dir dist 将src文件下的js文件转换到dist文件当中
可以在package.json中可以进行配置 “build”: “babel src --out-dir dist”,
之后每次在项目的根目录下执行npm run build 就可以进行ES6->ES5的转换