译-为你的Node.js配置babel 6

原文：http://jsrocks.org/2016/01/configuring-babel-6-for-node-js/

如果你像我一样在你的Node.js应用上还在使用老的ES5 js代码，那么你可以抛弃之前的习惯，现在就可以使用JavaScript ES2015的特性和ES2016的标准在你的Node.js应用上。ES2015和ES2016让JavaScript宛如清风般一样开发，但是，不是每一个ES2015特性在我们心爱的Node.js上支持。

这时候Babel就派上用场了。Babel是一个让ES2015和ES2016代码转换成ES5甚至是ES3的编译器。简单来说，它会转换你的JavaScript代码，让它在Node.js应用上非常愉悦的用起来。

小记： Node.js已经支持多种ES2015的功能，如果你不想转化你的ES2015代码，你可以在启动Node.js是使用

1

--harmony

1

node --v8-options | grep harmony

下面做一些假设：

• 你了解如何编写Node.js应用。
• 你会使用npm来安装软件包。
• 你已经安装了Node.js和npm。
• 你喜欢使用一些命令行命令。
• 最好也了解一点ES2015的语法，当然这个不是必须的。

一些例子

有没有一些可运行的例子而不仅仅是阅读代码? 这儿有可运行的例子

安装和开始学习Babel

有很多方法让你可以安装并使用Babel，但这这里我们讨论的是如何让babel-cli运行。

在

1

code

1
2
3
4
5
6
7
8
9
10
11
function* jsRocksIsAwesome() {
  yield "JS Rocks is Awesome";
  yield "JS Rocks says JavaScript Rocks";
  return "because JavaScript really rocks";
}

var jsRocks = jsRocksIsAwesome();

console.log(jsRocks.next());
console.log(jsRocks.next());
console.log(jsRocks.next());

我们将在下一个命令下安装babel-cli。他会在当前项目安装最后一个稳定版本的babel-cli并且也会追加在package.json的devDependencies里。

1
npm install --save-dev babel-cli

现在如果你运行

1
babel code/index.js -d build/

你将会看见你写的相同代码出现在build/index.js文件夹里，所以Babel的 插件 和 预设 来临了。

插件和预设

babel本身并没有做很多事情，但是通过插件和预设可以实现很多功能。我们希望可以通过babel在我们的代码中使用es2016和es2015所有的优美语法。

为此我们需要安装两个预设文件在

1

devDependencies

• es2015
• stage-0

运行下面的命令安装预设文件：

1
npm install --save-dev babel-preset-es2015 babel-preset-stage-0

babel拥有广泛的插件在这边获得

现在你需要在执行命令的时候包含这两个预设。

1
babel --presets es2015,stage-0 code/index.js -o build/app.js

现在你会看到正常的ES5代码已经出现在

1

app.js

1

编译后的代码

1
node build/app.js

使用Babel来配置一个合适的编译环境

这是非常神奇的，但是怎么样才能更好地运用在Node.js开发上？

babel的配置文件： .babelrc

1

.babelrc

1

.babelrc

1
2
3
{
  "plugins": ["es2015", "stage-0"]
}

你可以配置其他

1

.babelrc

对于本教程来说这是非常多的配置。现在，每当我们添加或删除插件，我们仅仅改变以下配置选项而不是去修改他的运行命令，是不是很简单！

现在，如果你运行：

1
babel -w code/ -d build/

他会从

1

.babelrc

1

code/

1

build/

1

-w

1

code

使用source maps在你的文件

如果你在思考虽然它非常酷和有趣但是非常难于调试编译后的代码。你不用对此担心。Source maps的思想就是出于这个目的。Source maps会告诉Node.js这个错误的 源文件 而不是 编译后的文件 ！

这边有一个

1

code/error.js

1

yield

1
2
3
4
5
6
7
8
9
function* errorFulGenerator() {
  yield "yo";
  throw new Error("source maps are awesome");
  return "";
}

var errorGen = errorFulGenerator();
errorGen.next();
errorGen.next();

我们使用如下命令去给 编译后的文件 生成 source maps。注意使用

1

--source-maps

1
babel code/ -d build/ --source-maps

现在当我们遇到错误的时候我们会获得有用的调试信息，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
errorGen.next()
         ^

Error: source maps are awesome
    at errorFulGenerator (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:3:9)
    at next (native)
    at Object.<anonymous> (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:10:10)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:138:18)
    at node.js:974:3

这个就是使用 source maps 的方法。

设置npm命令

为了能每一次都非常简单的使用编译命令，你可以更新你的

1

package.json

1

package.json

1

script

1
2
3
"scripts": {
  "build": "babel -w code/ -d build -s"
}

现在，我们运行：

1
npm run build

从今天开始就应该全面享受 ES2015/ES2016 带来的好处了！

了解更多关于Babel的知识

这是一个Babel基础教程，但是Babel的世界才刚刚开始。它有给力的社区作支撑并且已经在IT世界有了响当当的名声。Babel也支持大多数构建工具例如Grunt 和 gulp. 你可以在 Babel Website了解到相关信息。

这儿有一些资源可以帮助你在Bable的世界里打怪升级：

• Learn ES2015 and Babel using this detailed tutorial
• Read the Babel docs on setting up Babel (They’re helpful)

源码、贡献和感谢

本教程的源码在这个仓库。

如果你发现一下错别字或者有一些更新，请使用issues或者给我们的Github 仓库发起PR。

我也非常感谢Fabrício Matté 审阅这篇文章并且把它发布在JS Rocks 并且也做了一些更正。

文章来自 http://www.hacke2.cn