Babel初探-使用和配置

[Eamonnzhang]

如何使用Babel？

讲如何配置Babel之前，我们先来看看怎么使用Babel。
从JS运行环境上分类，可分为两种：

浏览器环境

浏览器环境下如何使用Babel取决于你如何处理和编写JS代码。

没有使用任何打包或者构建工具（直接在HTML文档中插入ES6脚本）

<div id="output"></div>
<!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 你的脚本代码 -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

如代码所示，只需在头部引入babel-standalone@6/babel.min.js"，然后把ES6代码写在<script>标签中，注意标签的type="text/babel"。
这种使用Babel的方式非常不推荐，首先是因为引入了babel-standalone@6/babel.min.js"，这个模块里包含了所有Babel的插件和功能，全特性支持，但是体积接近1MB，造成了多余的请求；其次是因为实时的转码也会浪费时间和资源，性能也不高。所以这种方式只推荐在开发和学习中使用，生产环境万万不可。

使用Webpack等打包工具

针对Webpack的打包，只需引入babel-loader即可转译JS代码：

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

其他的打包工具也是根据工具配置文档来配置，方式大同小异，不再赘述。

使用Gulp等构建工具

Gulp为例，只需引入gulp-babel：

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

其他构建工具使用方法也类似，不再赘述。

Node环境

Babel提供了babel-register模块，只需：

require("babel-register");
require("other ES6&7&8 Module");

这个包重写了require命令，加上了一个钩子。此后通过 node 引入的带 .es6, .es, .jsx 和 .js 后缀的所有后续文件都将会被 Babel 转译。
这种方式也是实时转码，所以也只适合在开发环境中使用。

友情提示，Node发展到今日（2018/11/10）已经基本上支持了所有（99%~100%）的包括ES2015、ES2016、ES2017、ES2018的特性，详见Node.js ES Support，所以要想使用新的ES特性，请尽快升级你的Node版本吧！

如何配置Babel？

Babel有两种并行的文件配置，可以一起用，也可以单独使用，都是放在项目或者模块的根目录下：

项目范围内的配置（Project-wide configuration）

babel.config.js，写法如下：

module.exports = function () {
  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

文件相关的配置（File-relative configuration）

.babelrc或者package.json的babel字段，写法如下：
.babelrc：

{
  "presets": [...],
  "plugins": [...]
}

package.json：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

那么读到这里你应该奇怪，为什么要用两种文件配置，直接用一种不好吗？下面我来粗浅的讲一下，二者的异同。

两种配置的异同

这两种配置方式差异主要体现在Babel向上级目录查找的方式。
.babelrc的查找机制是这样的：
Babel从被编译的文件开始向上查找该文件，合并以及重写配置，一旦找到包含package.json的目录，搜索将停止，因此.babelrc只应用于单个模块中。
这会带来一个问题就是，比如我们用了第三方的node_modules或者其他模块，我们想在自己的项目里重写它们的Babel配置变的十分困难，直接去修改该模块的.babelrc显然是不友好的。
所以Babel7.x引入了babel.config.js，和.babelrc查找机制不同的地方在于，Babel对于这个文件会一直向上查找，查到一个根目录（后面对这个目录会做讲解），然后读取该目录下的babel.config.js，最后合并以及重写配置。这个根目录，可以理解为是当前工作的目录，但是如果babel.config.js被放在了如下目录，将会被直接忽略：

babel.config.js
packages/
  mod1/
    package.json
    src/index.js
  mod2/
    package.json
    src/index.js

必须放在packages目录下才有效。当然也可以通过设置"configFile"来指定配置文件的位置，最终也可以被Babel读取到。