你真的会用 babel 吗？

发布于 2022-06-17 00:07:27 字数 8173 浏览 1222 评论 0

这个问题是对自己的发问，但我相信会有很多跟我一样的同学。

对于 babel 的使用，近半年来一直停留在与 webpack 结合使用，以及在浏览器开发环境下。导致很多 babel 的包，我都不清楚他们是干嘛的。比如 babel-register，还有 babel-runtime，各种 presets 的区别，transform-runtime 和 babel-polyfill 的区别，helpers 是干嘛的。尽管网上的 babel 的教程很多了，但是解答自己的一些疑问，还是要花费一些功夫。所以抽出时间来总结一下。如果你对于以上概念已经比较清楚了，就不需要往下看了。

本次的 example 代码都在 github 上，而且每个文件夹都有详细的 README，说明我的使用方式。可以去参照一下用例的使用，并 clone 下来自己研究一下。

版本变化

说实话，从我做前端的时候，接触 babel 的时候，就已经是 babel 6 了，但是这不妨碍了解一下它的重大版本变化。
上一个版本 babel 5 是全家桶，包括各种package， plugins，尽可能的想通过你的一次安装，达到全能的效果。不过你现在安装npm install babel，会得到一个 warning。babel 6 是 2015年10月30号发布，主要做了以下更新：

拆分成几个核心包，babel-core,babel-node,babel-cli...
没有了默认的转换，现在你需要手动的添加 plugin。也就是插件化
添加了 preset，也就是预置条件。
增加了 .babelrc 文件，方便自定义的配置。

差不多了，我感觉其他的也不需要了解了。

包

babel 里面有好多的包，所以必须搞清楚他们都是干嘛的，才能让我们更好的使用这个工具。

babel-core

可以看做 babel 的编译器。babel 的核心 api 都在这里面，比如 transform，主要都是处理转码的。它会把我们的 js 代码，抽象成 ast，即 abstract syntax tree 的缩写，是源代码的抽象语法结构的树状表现形式。我们可以理解为，它定义的一种分析 js 语法的树状结构。也就是说 es6 的新语法，跟老语法是不一样的，那我们怎么去定义这个语法呢。所以必须要先转成 ast，去发现这个语法的 kind，分别做对应的处理，才能转化成 es5.

主要 api：

var babel = require('babel-core');
var transform = babel.transform;

babel.transform(code: string, options?: Object)

transform("code", options) // => { code, map, ast }

babel.transformFile(filename: string, options?: Object, callback: Function)

var path = require('path');
var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ['env'],
  plugins: ['transform-runtime'],
}, function(err, result) {// { code, map, ast }
    console.log(result);
});

babel.transformFileSync(filename: string, options?: Object)

var result = babel.transformFileSync(path.resolve(__dirname) + "/test.js", {
  presets: ['env'],
  plugins: ['transform-runtime'],
});
console.log(result, 'res');

babel.transformFromAst(ast: Object, code?: string, options?: Object)

反转，你把 ast 传入，解析为 code 代码。

options

babel-cli

提供命令行运行 babel。也就是你可以 babel filename 去对文件转码。
安装的话

npm install --save-dev babel-cli

npm isntall babel-cli -g

使用对应就是

node_module/.bin/babel script.js --out-file script-compiled.js

babel script.js --out-file script-compiled.js

具体使用还是看官方文档吧，我就不搬文档了。

babel-external-helpers

babel-cli 中的一个command，用来生成一段代码，包含 babel 所有的 helper 函数。

首先我们需要了解什么是 helpers。babel 有很多帮助函数，例如 toArray函数， jsx转化函数。这些函数是 babel transform 的时候用的，都放在 babel-helpers这个包中。如果 babe 编译的时候检测到某个文件需要这些 helpers，在编译成模块的时候，会放到模块的顶部。
像这样

(function(module, exports, __webpack_require__) {

function _asyncToGenerator(fn) { return function () {  }; } // 模块顶部定义 helper

// some code 
// async 语法已经被 transform-async-to-generator 转化，再利用 helper 函数包装，消费 generator。
const func = (() => {
  var _ref = _asyncToGenerator(function* () {
    console.log('begin');
    yield new Promise(function (resolve) {
      setTimeout(function () {
        resolve();
      }, 1000);
    });
    console.log('done');
  });
})

})

但是如果多个文件都需要提供，会重复引用这些 helpers，会导致每一个模块都定义一份，代码冗余。所以 babel 提供了这个命令，用于生成一个包含了所有 helpers 的 js 文件，用于直接引用。然后再通过一个 plugin，去检测全局下是否存在这个模块，存在就不需要重新定义了。

使用：

1. 执行 babel-external-helpers 生成 helpers.js 文件，

 node_modules/.bin/babel-external-helpers > helpers.js

注意：示例代码的包都是装到项目中的，也就是本地。同样你可以全局安装直接执行。

2. 安装 plugin

npm install --save-dev babel-plugin-external-helpers

3. 然后在 babel 的配置文件加入

{
  "plugins": ["external-helpers"]
}

4. 入口文件引入 helpers.js

require('./helpers.js');

这样就可以啦，还是可以减少很多代码量的。另外如果使用了 transform-runtime，就不需要生成 helpers.js 文件了，这个在后面的 babel-runtime 再说。

babel-node

也是 babel-cli 下面的一个 command，主要是实现了 node 执行脚本和命令行写代码的能力。举两个栗子就清楚了。

执行脚本

默认的node 环境肯定是不支持 jsx 的

// test.js
const React = require('react');
const elements = [1, 2, 3].map((item) => {
  return (
    <div>{item}</div>
  )
});

console.log(elements);

执行 test.js，会报错，不认识这个语法。

node test.js //报错

但是使用 babel-node 就可以。

 node_modules/.bin/babel-node --presets react test.js

--presets react 是参数，等同于

{
  "presets": ["react"]
}

执行正常。

node 命令行写代码

注意：本文所有代码示例，均在 node 版本 4.8.4 下执行。

写个解构赋值的，直接运行 node，不支持。

运行 node_modules/.bin/babel-node --presets env

得到 a 的 value 是 1。

通过栗子基本已经介绍了 babel-node 的用法了，就是方便我们平常开发时候，写一些脚本的。所以它不适用于生产环境。另外，babel-node 已经内置了 polyfill，并依赖 babel-register 来编译脚本。好，那 babel-register 是什么呢

babel-register

npm install babel-register --save-dev

babel-node 可以通过它编译代码，可以了解到，它其实就是一个编译器。我们同样可以在代码中引入它 require('babel-register')，并通过 node 执行我们的代码。

它的原理是通过改写 node 本身的 require，添加钩子，然后在 require 其他模块的时候，就会触发 babel 编译。也就是你引入require('babel-register')的文件代码，是不会被编译的。只有通过 require 引入的其他代码才会。我们是不是可以理解，babel-node 就是在内存中写入一个临时文件，在顶部引入 babel-register，然后再引入我们的脚本或者代码？

举个栗子，还是 node 中执行 jsx，要通过 babel 编译。我们可以把 jsx 的代码 a.js 编译完输出到一个 b.js，然后 node b.js 也是可以执行的。但是太麻烦，不利于开发。让我们看一下通过 register 怎么用：

// register.js 引入 babel-register，并配置。然后引入要执行代码的入口文件
require('babel-register')({ presets: ['react'] });
require('./test')

// test.js 这个文件是 jsx...
const React = require('react');
const elements = [1, 2, 3].map((item) => {
  return (
    <div>{item}</div>
  )
});
console.log(elements);

// 执行
$ node register.js

它的特点就是实时编译，不需要输出文件，执行的时候再去编译。所以它很适用于开发。总结一下就是，多用在 node 跑程序，做实时编译用的，通常会结合其他插件作编译器使用，比如 mocha 做测试的时候。

值得一提的是，babel-register 这个包之前是在 babel-core 下面的，所以也可以 require('babel-core/register') 去引入，跟 require('babel-register')是一样的。但是，babel 的团队把 register 独立出来了，而且未来的某一天（升 7.0）会从 babel-core 中废除，所以我们现在最好还是使用 babel-core/register.js

babel-runtime

npm install babel-runtime --save

这个包很简单，就是引用了 core-js 和 regenerator，然后生产环境把它们编译到 dist 目录下，做了映射，供使用。那么什么是 core-js 和 regenerator 呢。

首先我们要知道上面提到的 babel-core 是对语法进行 transform 的，但是它不支持 build-ints（Eg: promise，Set，Map），prototype function（Eg: array.reduce,string.trim），class static function （Eg：Array.form，Object.assgin），regenerator （Eg：generator，async）等等拓展的编译。所以才要用到 core-js 和 regenerator。

core-js

core-js 是用于 JavaScript 的组合式标准化库，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 实现。也就是说，它几乎包含了所有 JavaScript 最新标准的垫片。不过为什么它不把 generator 也实现了。

分享到QQ

分享到微博