现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法 。
建立工程目录：
建立一个项目的工程目录，在目录下建立两个文件夹：src和dist，并新建一个 index.html 文件。
src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的是这里的js文件。
注意的是在引入js文件时，引入的是dist目录下的文件。
在src目录下，新建index.js文件
初始化项目
打开终端，输入初始化命令
npm init -y
-y代表全部默认同意，但项目目录文件夹名称首字母不能大写。命令执行完成后，会在项目根目录下生产package.json文件。
全局安装Babel-cli
在终端中输入安装命令
npm install -g babel-cli
建议使用淘宝镜像 cnpm 进行安装
本地安装babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后，package.json文件，已经多了devDependencies选项。项目目录下会出现 node_modules 文件夹。
新建 .babelrc
此时可以在终端输入转换命令，将ES6转换为ES5语法。
babel src/index.js -o dist/index.js
完成后在 dist 目录下 生产了 index.js文件
简化命令
打开package.json文件，修改文件下 "scripts" 选项。
修改好后，我们就可以使用 npm run build 来进行ES6与ES5的转换了。
网友评论