ES6-基础学习（1）：开发环境搭建

ES6-基础学习（1）：开发环境搭建
现在Chrome浏览器已经很好的支持ES6了，但有些低版本的浏览器或其他浏览器还是不支持ES6的语法，因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法。

项目开发过程中 Webpack 有自动编译转换功能，因此免去了环境搭建这一步。

但除了Webpack自动编译外，我们还可以用Babel来完成编译。

下面搭建一个基本的ES6开发环境。

一、全局安装babel-cli
在CMD终端命令行或代码编辑工具(vscode、webstorm) 终端中输入以下命令，全局安装babel-cli。

npm install -g babel-cli 或 cnpm install -g babel-cli
二、新建源文件目录和基础文件 index.html、jindex.js
1、新建源文件目录和基础文件 index.html、jindex.js
2、项目初始化
npm init -y
三、本地安装 babel-preset-env 和 babel-cli
npm install --save-dev babel-preset-env 或 cnpm install --save-dev babel-preset-env
npm install --save-dev babel-cli 或 cnpm install --save-dev babel-cli
当然也可以两个命令合并执行
npm install --save-dev babel-preset-env babel-
cli 或 cnpm install --save-dev babel-preset-env babel-cli 安装完成后，package.json文件中会自动添加devDependencies 属性及内容。

新建.babelrc文件，在根目录下新建.babelrc文件，并键入以下代码。

（注：.babelrc文件就是一般的文本文件，不是json文件）{
"presets":["env"],
"plugins":[]
}
.babelrc文件建立完成后，所有的准备工作全部就绪。

现在可以在终端命令行输入转换命令：babel src/index.js -o dist/index.js。

babel src/index.js -o dist/index.js
四、简化(格式化)转换命令
上面那一串命令是不是既长又不规则，输起来还麻烦，记起来也麻烦。

所以迫切需要将上面那一串命令简化和格式化，恰好这段时间一直在整Electron，Electron项目的启动命令：npm start；打包命令：npm run-script package 都很简洁且规整，所以可以借鉴这一点。

打开package.json文件，找到"scripts" 项，把想简化和格式化成的命令写入 "scripts" 内。

如想简化成：npm run dev，则在"scripts" 内添加如下代码：
"dev": "babel src/index.js -o dist/index.js"
如想简化成：npm run build，则把dev 换成 build 即可，改成如下即可：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src/index.js -o dist/index.js"},
按照这种格式，哪怕想格式化成自己的姓名都行。

既方便记忆，又方便输入。

修改好以后，下次转换代码直接输入和执行命令：npm run xxxxxx 就行了(甚至直接用 npm run xxxxxx 当命令都行)。

下面
是 package.json 全部代码以及效果截图：
{
"name": "ES6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1","xxxxxx": "babel src/index.js -o dist/index.js"},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"}
}
到此为止，ES6的本地开发环境正式搭建完毕，下面就可以随意学习和开发了，并进行代码转换。

最后，附上几个Babel常见命令：
1、直接输入babel-node命令，在命令行中直接执行ES6代码：
babel-node
2、转换es6.js文件并在当前命令行程序窗口中输出转换后的ES5代码：
babel es6.js
3、将es6.js转换后输出到es5.js文件中（使用 -o 或 --out-file）：
babel es6.js -o es5.js
babel es6.js --out-file es5.js
4、实时监控es6.js文件变化，有变化就重新编译（使用 -w 或 --watch）：
babel es6.js -w --out-file es5.js
babel es6.js --watch --out-file es5.js
每次编辑修改ES6代码后，按Ctrl+S保存就会自动执行编译。

5、编译整个src文件夹并输出到dist文件夹中（使用-d 或--out-dir）
babel src -d dist
babel src --out-dir dist
6、编译整个src文件夹并输出到一个文件中
babel src --out-file es5.js
最后的最后，ES6的整个学习历程都参考了阮一峰老师
的 ECMAScript 6 入门教程，教程内容详实、举例清晰明确、代码讲解通俗易懂，在此特此感谢！。