配置 Babel（进阶）

大多数人使用 Babel 的内建预设就足够了，不过 Babel 提供了更多更细粒度的能力。

手动指定插件

Babel 预设就是一些预先配置好的插件的集合，如果你想要做一些不一样的事情你会手动去设定插件，这和使用预设几乎完全相同。

首先安装插件：

  1. $ npm install --save-dev babel-plugin-transform-es2015-classes

然后往 .babelrc 文件添加 plugins 字段。.

  1.   {
  2. +   "plugins": [
  3. +     "transform-es2015-classes"
  4. +   ]
  5.   }

这能让你对正在使用的转换器进行更细致的控制。

完整的官方插件列表请见 Babel 插件页面。.

同时也别忘了看看由社区构建的其他插件。 如果你想学习如何编写自己的插件可以阅读 Babel 插件手册。.

插件选项

很多插件也有选项用于配置他们自身的行为。 例如，很多转换器都有“宽松”模式，通过放弃一些标准中的行为来生成更简化且性能更好的代码。

要为插件添加选项，只需要做出以下更改：

  1.   {
  2.     "plugins": [
  3. -     "transform-es2015-classes"
  4. +     ["transform-es2015-classes", { "loose": true }]
  5.     ]
  6.   }


接下来几周内我会更新插件文档来详细介绍每一个选项。关注我以获知更新。.


基于环境自定义 Babel

Babel 插件解决许多不同的问题。 其中大多数是开发工具，可以帮助你调试代码或是与工具集成。 也有大量的插件用于在生产环境中优化你的代码。

因此，想要基于环境来配置 Babel 是很常见的。你可以轻松的使用 .babelrc 文件来达成目的。

  1.   {
  2.     "presets": ["es2015"],
  3.     "plugins": [],
  4. +   "env": {
  5. +     "development": {
  6. +       "plugins": [...]
  7. +     },
  8. +     "production": {
  9. +       "plugins": [...]
  10. +     }
  11.     }
  12.   }

Babel 将根据当前环境来开启 env 下的配置。

当前环境可以使用 process.env.BABEL_ENV 来获得。 如果 BABEL_ENV 不可用，将会替换成 NODE_ENV，并且如果后者也没有设置，那么缺省值是"development"。.

Unix

  1. $ BABEL_ENV=production [COMMAND]
  2. $ NODE_ENV=production [COMMAND]

Windows

  1. $ SET BABEL_ENV=production
  2. $ [COMMAND]


注意：[COMMAND] 指的是任意一个用来运行 Babel 的命令（如：babel，babel-node，或是 node，如果你使用了 register 钩子的话）。


提示：如果你想要让命令能够跨 unix 和 windows 平台运行的话，可以使用 cross-env。.


制作你自己的预设（preset）

手动指定插件？插件选项？环境特定设置？所有这些配置都会在你的项目里产生大量的重复工作。

为此，我们鼓励社区创建自己的预设。 这可能是一个针对特定 node 版本的预设，或是适用于你整个公司的预设。.

创建预设非常容易。比方说你这样一个 .babelrc 文件：

  1. {
  2.   "presets": [
  3.     "es2015",
  4.     "react"
  5.   ],
  6.   "plugins": [
  7.     "transform-flow-strip-types"
  8.   ]
  9. }

你要做的就是依循命名约定 babel-preset-* 来创建一个新项目（请务必对这个命名约定保持责任心，也就是说不要滥用这个命名空间），然后创建两个文件。

首先，创建一个 package.json，包括针对预设所必要的 dependencies。

  1. {
  2.   "name": "babel-preset-my-awesome-preset",
  3.   "version": "1.0.0",
  4.   "author": "James Kyle <me@thejameskyle.com>",
  5.   "dependencies": {
  6.     "babel-preset-es2015": "^6.3.13",
  7.     "babel-preset-react": "^6.3.13",
  8.     "babel-plugin-transform-flow-strip-types": "^6.3.15"
  9.   }
  10. }

然后创建 index.js 文件用于导出 .babelrc 的内容，使用对应的 require 调用来替换 plugins／presets 字符串。

  1. module.exports = {
  2.   presets: [
  3.     require("babel-preset-es2015"),
  4.     require("babel-preset-react")
  5.   ],
  6.   plugins: [
  7.     require("babel-plugin-transform-flow-strip-types")
  8.   ]
  9. };

然后只需要发布到 npm 于是你就可以像其它预设一样来使用你的预设了。