JavaScript ES2015（ES6）：准备使用 ES2015

你写了几行 JavaScript 代码，放到浏览器上就能去运行，这是因为浏览器里面都有一个处理 JavaScript 语言的引擎。不同的浏览器使用的引擎可能不太一样，比如 Chrome 浏览器用的就是 Google 研究出来的 JavaScript 引擎。这套引擎不仅被放到了 Chrome 浏览器里，还可以被放在服务器上，也就是 Node.js。

因为处理 JavaScript 用的引擎不仅是只有 Google 的，还有其它的公司或者组织做的 JavaScript 引擎，这就需要大家坐在一起商量出一套规范。不然我们写的 JavaScript 代码，在不同环境下的运行结果可能就不一致了，我们可能要分别为 Chrome，IE，Firefox 各自去写一套 JavaScript 代码。对于我们开发者来说，谁都不喜欢这样。我们想要的是自己的 JavaScript 代码在任何支持运行 JavaScript 的环境下的运行结果都是一样的。

ES 指的是 ECMAScript，它就是 JavaScript 的标准或者叫规范。也就是大家坐在一起商量出来的结果，厂商们都遵守这套规范，才能保证我们的代码可以在任何浏览器或者其它的环境下正确的运行。这套标准的版本命名方式现在会使用年份，比如 ECMAScript 2015，之前也被称为 ECMAScript 6 （ES6）。

有了标准与规范，并不能保证厂商们都统一的实施了这套标准， 这需要时间。你可能学了几个新的语法，打算去试一些，然后发现在有些浏览器上可以正常运行，但在另外一些浏览器上确不行。这时候我们就要使用一些工具，去做一些转换，这些工具会把你的代码转换成一般的浏览器都能懂的写法。这就让我们现在就可以使用新的语法了，不需要太担心运行环境是否支持 。Babel 就是一套这样的工具。

Babel

先创建一个项目：

cd ~/desktop
mkdir es2015
cd es2015
npm init -y

安装 Babel 命令行工具，还有 es2015 预设插件：

npm install babel-cli babel-preset-es2015 --save-dev

创建一个 babel 配置文件：

touch .babelrc
vi .babelrc

内容如下：

{
  "presets": ["es2015"]
}

意思就是，如果使用 Babel 转换代码的话，用一下 es2015 这个预设，这样 Babel 就会认识你用 es2015 标准写的代码，然后去转换一下这些代码。

小技巧

你可以用 npm 为本地项目去安装一些依赖的包，这些包里可能会包含一些命令行工具，有的时候你需要使用这些在本地项目下面安装的包里的命令行工具，这样在执行命令的时候，你需要使用这个命令行工具完整的相对路径。可能像这样（假设我的位置是在项目的根目录下）：

./node_modules/.bin/babel-node xxx

你可以配置一下 .bash_profile 文件：

// 编辑用户主目录下的 .bash_profile 文件
vi ~/.bash_profile
// 添加下面这行配置
export PATH=$PATH:./node_modules/.bin

// 保存 .bash_profile，重启终端

现在我们就可以直接在项目下面执行在项目本地安装的包里的命令行工具了：

babel-node xxx

试验

先在 Node 环境下试验一些 ES2015，新版本的 Node 已经支持大部分的 ES2015 的新特性，不过也有些特别的情况，比如 Node 暂时不支持使用 import 导入模块 。

在项目下面新建一个文件，名字是 index.js，在文件里添加几行代码：

import hello from './a'
console.log(hello)

上面用了 import 导入了项目下的模块 a，再去创建这个模块：

const a = 'hello'
export default a

然后执行一下：

node index.js

会出现错误提示：

SyntaxError: Unexpected token import

我们可以使用 babel-node 再去执行一下：

babel-node index
// hello