ES6的出现极大的简化了JS的开发，那么问题来了，当我们写了一段ES6的代码想在浏览器上运行时发现浏览器不支持（看不到想要的效果）怎么办？下面就为大家介绍一下如何搭建一个ES6的运行环境。
首先需要介绍一下ES6的开发利器：babel，babel是一个编译器，负责将源代码转换成指定语法的目标代码，经过转换之后我们就可以在浏览器中执行我们的代码
babel为我们提供了一个很方便的命令行工具：babel-cli，利用它我们可以在命令行中执行编译命令（将ES6源代码转换成浏览器可以识别运行的普通JS代码），我们可以使用npm来安装它，在命令行执行：
1-1. npm install babel-cli -g
考虑到不同的项目依赖的版本可能不同，全局的安装babel-cli不能保证兼容到各个项目，因此我们可以选择本地安装babel-cli，则执行以下命令：
1-2. npm install babel-cli --save-dev
本地安装完成后我们可以卸载全局安装，执行以下命令：
1-3. npm uninstal babel-cli -g
安装babel-cli之后还需要安装转码规则包（如ES6转换成ES5，则需要安装babel-preset-es2015包）等，为此我们先创建一个小demo用来体验一下整个安装和运行过程，首先在你喜欢的磁盘中新建一个babel-test文件夹，在这个文件夹中创建两个目录es6和js，分别用来存放ES6源代码和编译后的ES5目标源代码，通过命令行cd将目标转移到刚才新建的babel-test文件夹下，执行以下命令，目的是生成一个默认的package.json文件：
2. npm init -yes
然后在当前目录下执行下面的命令用来安装ES6转码规则包
3. npm install babel-preset-es2015 -- save-dev
在babel-test/es6文件夹中创建一个test.es6文件用于写入ES6代码。由于Babel编译源文件时没有过多的限制，所以我们也可以选择使用js或es作为文件后缀名，代码如下：
let myName = 'Gao';
let say =Hello ${myName};
console.log(say);
接下来就是运行babel命令来编译我们的ES6源码，意思是编译es6下面的test.es6文件，输出文件为js目录下test.js，同时指定编译规则包es2015，命令执行完成后会在js文件夹下找到一个test.js文件，执行命令如下：
4-1. 编译单个文件：babel es6/test.es6 --out-file js/test.js --presets es2015
4-2. 编译所有文件：babel es6 --out-dir js --presets es2015
此时我们打开js/test.js文件看到的就是可以直接在浏览器上运行的代码，然而为了简化编译时执行命令的复杂程度，我们可以修改package.json文件中的scripts项，如下：
"scripts": {
"compile": "babel es6 --out-dir js --presets es2015"
}
修改完之后我们可以通过执行以下简单的命令来运行这个编译任务：
4-3. npm run compile
网友评论