ES6简介
在搭建es6开发环境之前，先简单介绍一下es6。
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
我们为什么要使用es6？es6有什么优点？......，我会在后面写一个es6专题系列，来介绍es6的使用。本次分享的内容是 es6的开发环境搭建。
那么，你肯定又要问，问什么要搭建es的开发环境，上面不都说 es6是JavaScript 语言的下一代标准了嘛，我们平时写的js都不需要搭建环境，直接在浏览器里就能运行。
因为至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持，如果直接使用的话，会报错的。
所以我们既想使用es6带来的新语法、新特性，又想让现在的浏览器支持es6语法，于是乎像 babel、Traceur 等编译器便出现了。它们能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码，使其得到浏览器的支持。
本文讲的主要是把ES6转换成ES5。
建立工程目录
先建立一个项目的工程目录，并在目录下建立两个文件夹：src和dist
- src：书写ES6代码的文件夹，写的js程序都放在这里。
- dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的是这里的js文件。
编写index.html
在根目录新建一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>要注意的是，在引入js文件时，引入的是dist目录下的文件。
<script src="./dist/index.js"></script>
编写index.js
在src目录下新建一个index.js文件。这里用ES6写法声明一个变量a，并打印在控制台。
let a = 10;
console.info(a);初始化项目
打开终端，在项目根目录输入下面的命令：
npm init -y-y：代表接下来的选择全部同意
命令执行完成后会在根目录下生成packapge.json
{
"name": "es6test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
安装Babel-cli和Babel-perset-es2015
输入一下命令安装：
cnpm install -g babel-clicnpm：cnpm是使用淘宝镜像的cnpm来安装，安装速度会比使用npm快
安装完Babel-cli还不能直接让ES6语法转成ES5语法，还需要安装babel-perset-es2015
cnpm install --save-dev babel-preset-es2015当然也可以两个同时安装
cnpm install --save-dev babel-preset-es2015 babel-cli安装成功后，可以看到package.json文件里面多了devDependencies选项：
新建.babelrc
在根目录下新建.babelrc文件
{
"presets":[
"es2015"
],
"plugins":[]
}在项目工程脚手架中，一般会使用.babelrc文件，通过配置一些参数配合webpack进行打包压缩
在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为以下三项：
1）语法转义器。主要对javascript最新的语法糖进行编译，并不负责转译javascript新增的api和全局对象。例如let/const就可以被编译，而includes/Object.assign等并不能被编译。常用到的转译器包有，babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中可以只选用babel-preset-env来代替余下的，但是还需要配上javascirpt的制作规范一起使用，同时也是官方推荐：
{
"presets": ["env", {
"modules": false
}],
"stage-2"
}2）补丁转义器。主要负责转译javascript新增的api和全局对象，例如babel-plugin-transform-runtime这个插件能够编译Object.assign,同时也可以引入babel-polyfill进一步对includes这类用法保证在浏览器的兼容性。Object.assign 会被编译成以下代码：
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()3）jsx和flow插件，这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为babel-preset-react
插件（plugins）
这里主要介绍一款常用插件，transform-runtime
基本配置代码如下：
{
"plugins": ["transform-runtime"]
}Babel对常用的函数使用非常小的辅助（内置的垫片比较少），例如_extend。默认情况下它将会添加到每个引用的文件。这种重复有时候是非常没必要的。特别是你的应用分散在很多文件中。
这是transform-runtime插件之所以产生的原因：所有的这些辅助（垫片）将会引用babel-runtime来避免编译时重复。runtime将会编译到你的build中。
另一个目的是，这个转换器为你的代码创建了一个沙盒环境。如果你使用babel-polyfill并且把它内置提供promise,set,map这样的对象或功能，他们将会污染全局环境。也许在一个应用中或者命令行工具中没问题，但是如果你的代码是个库，你想发布给其他人使用，因为使用的人可能在各种各样的执行环境中，所以可能导致错误，不能执行。
转换器transformer会将这些内置（垫片）设置别名到core-js中，因此你可以不使用require来无缝的使用（垫片中的对象和方法）。
.babelrc配置文件主要还是以presets和plugins组成，通过和webpack配合进行使用，分享下我们在项目中常用的配置。
vue项目开发使用的配置如下：
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
// 下面指的是在生成的文件中，不产生注释
"comments": false,
"plugins": ["transform-runtime","syntax-dynamic-import"],
"env": {
// test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}建立完成.babelrc后，就可以在终端输入转换命令了（ES6转ES5）：
babel src/index.js -o dist/index.js可以看到在dist文件夹下面生成了一个新的index.js文件
语法也成功转换了
简化转化命令
在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，在scripts中添加一条命令：
"build": "babel src/index.js -o dist/index.js"修改好后，以后我们就可以使用 npm run build 来进行转换了。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
