2019-05-31（转）Babel 7.1介绍 transform-runtime polyfill env

什么是Babel？

Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。

主要做的事情：

  • 语法转换
  • 实现目标环境缺少的功能（es2015+）
  • 源代码转换 (codemods)
  • 还有更多！（点开这些视频看看）

用法

在这里会介绍如何将用es2015+写的JavaScript代码转换为能在当前浏览器正常执行的代码。包括两方面：语法转换、功能补充（这里暂时叫这个名字，之后会相信介绍）。

  1. 安装这些必要的包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
  1. 在根目录创建一个babel.config.js的配置文件：
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];
module.exports = { presets };
  • targets：表示编译出的代码想要支持的浏览器版本
  • useBuiltIns：之后详细解释
  1. 执行命令
./node_modules/.bin/babel src --out-dir lib

然后你用es2015+编写的代码就被转化为能在目标浏览器正常运行的代码了。

如何运行的？

所有你用到的babel包都是被单独发布在@babel作用域下（v7开始），比如@babel/preset-env、@babel/core、 @babel/cli，因为babel是插拔式的，所以用到什么安装什么，每个包各司其职。

@babel/core

其中最核心的包就是@babel/core，它主要的作用就是编译：

npm install --save-dev @babel/core

然后你可以在代码里直接使用：

const babel = require("@babel/core");
babel.transform("code", optionsObject);

这里的optionsObject就和之前的babel.config.js是一样的，如何编译代码，编译成什么样子什么标准用什么东西都在这里配置。

@babel/cli

为什么我们能在命令行里直接使用：

./node_modules/.bin/babel src --out-dir lib

光有core是无法在命令行使用这些功能的，@babel/cli支持你直接在命令行中编译代码。
这句话会编译你src目录下的所有js代码，并编译成你想要的那样（babel.config.js配置的），并输出到lib目录下。
如果我们没有配置babel.config.js，那么执行这句话之后src会被原封不动的搬到lib下（格式除外）。

--out-dir 代表输出到哪个目录下，你可试试--help看其他的用法，如果在这里我们没有配置babel.config.js，我们可以通过--plugins 或者 --presets告诉 代码应该编译成什么样子。

Plugins & Presets

plugins顾名思义就是组件，一个小型的js代码程序告诉Babel
如何转换你的源码，你可以自己写plugins也可以在github上使用别人写好的。来看如何使用一个插件：@babel/plugin-transform-arrow-functions ：

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

@babel/plugin-transform-arrow-functions组件的作用就是将es2015的箭头函数转换成普通函数：

// src/foo.js：
const fn = () => 1;

// converted to

// lib/foo.js：
var fn = function fn() {
  return 1;
};

当然，es2015有这么多新的语法，我们不可能一一的去引用每个plugins来编译我们的代码吧，于是就又了presets，顾名思义——预设，它包含了一组我们需要的plugins。就像plugin一样，你也可以编写一组你最需要的plugins成为一个preset。

目前这里有一个非常优秀的preset叫env —— @babel/preset-env。

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

不需要任何配置，这个preset包含了所有现代js（es2015 es2016等）的所有新特性，你也可以传递一些配置给env，精准实现你想要的编译效果。

配置

更具你的需求，配置肯定是不一样的，这里贴一个官方推荐配置：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    },
  ],
];

module.exports = { presets };

这个配置只配置了prsets，其实还可以配置plugins。

Polyfill

中文翻译是垫片，之前没有详细了解babel之前，我也很迷茫这个polyfill是啥，因为语法不都给你转换好了，还需要这个东西干啥，后来仔细想了一下，要适应新特性应该从两方面入手：

  1. 语法转换：
() => {};

for (let i of items) {};

比如箭头函数、for...of，在不支持这些语法的环境下，直接会报语法错误，因为编译器根本不知道 =>这些是什么鬼符号，要做到让编译器识别，那就要将这样的语法转换成浏览器能识别的代码，那么就需要语法转换。

然后这里回到我们最开始安装包那里：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

仔细看我们安装core cli env都是 --save-dev，这是因为我们发布的代码都是编译好的代码，这些都只是开发依赖，发布的代码不需要依赖这些包。

  1. 功能补充
'foo'.includes('f');

es2015里不仅只有新的语法，还有实例的扩展，比如String，其实这里只是调用了String实例的一个方法，我们无论怎么语法转换也没有什么用吧，如果我们在不支持String.prototype.includes的编译器里跑这些代码，会得到 'foo'.includes is not a function. 这样的一个报错，而不是语法报错。

Polyfill提供的就是一个这样功能的补充，实现了Array、Object等上的新方法，实现了Promise、Symbol这样的新Class等。到这里应该能明白了，为什么安装@babel/polyfill没有-dev，因为就算代码发布后，编译后的代码依然会依赖这些新特性来实现功能。

虽然@babel/polyfill提供了我们想要的所有新方法新类，但是这里依然存在一些问题：

  1. 体积太大：比如我只用了String的新特性，但是我把整个包都引进来了，，这不是徒增了很多无用的代码。
  2. 污染全局环境：如果你引用了 @babel/polyfill，那么像Promise这样的新类就是挂载在全局上的，这样就会污染了全局命名空间。可能在一个团建建立的项目问题不太大，但是如果你是一个工具的开发者，你把全局环境污染了，别人用你的工具，就有可能把别人给坑了。

一个解决方案就是引入transform runtime 来替代 @babel/polyfill。

幸运的是，我们有env这个preset，它又一个useBuiltIns选项，如果设置成"usage"，那么将会自动检测语法帮你require你代码中使用到的功能。

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

比如我在代码中：

Promise.resolve().finally();

如果在edge17不支持这个特性的环境里运行，将会帮你编译成：

require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

主要功能：

  1. 避免多次编译出helper函数：
    Babel转移后的代码想要实现和原来代码一样的功能需要借助一些帮助函数，比如：
class Person {}

会被转换为：

"use strict";

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Person = function Person() {
  _classCallCheck(this, Person);
};

这里_classCallCheck就是一个helper函数，试想下如果我们很多文件里都声明了类，那么就会产生很多个这样的helper函数，积少成多增大了代码体积。
这里的@babel/runtime包就声明了所有需要用到的帮助函数，而@babel/plugin-transform-runtime的作用就是将所有需要helper函数的文件，依赖@babel/runtime包：

"use strict";

var _classCallCheck2 = require("@babel/runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};

这里就没有再编译出helper函数classCallCheck了，而是直接引用了@babel/runtime中的helpers/classCallCheck。

  1. 解决@babel/polyfill提供的类或者实例方法污染全局作用域的情况。
    @babel/plugin-transform-runtime会为代码创建一个沙盒环境，为core-js这里内建的实例提供假名，你可以无缝的使用这些新特性，而不需要使用require polyfill。

"foobar".includes("foo")，这样的实例方法仍然是不能正常执行的，因为他在挂载在String.prototype上的，如果需要使用这样的实例方法，还是不得不require('@babel/polyfill')

比如：

var sym = Symbol();

var promise = new Promise();

console.log(arr[Symbol.iterator]());

会被编译成：

"use strict";

var _getIterator2 = require("@babel/runtime-corejs2/core-js/get-iterator");

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _promise = require("@babel/runtime-corejs2/core-js/promise");

var _promise2 = _interopRequireDefault(_promise);

var _symbol = require("@babel/runtime-corejs2/core-js/symbol");

var _symbol2 = _interopRequireDefault(_symbol);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var sym = (0, _symbol2.default)();

var promise = new _promise2.default();

console.log((0, _getIterator3.default)(arr));

这样像Symbol、Promise这样的新类也不会污染全局环境了。

用法：

配置在配置文件里，以.babelrc举例：
无选项配置：

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

有选项配置（默认值）:

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

这个插件的默认配置默认用户已经提供了所有polyfillable APIs，因此想要无缝使用不污染全局环境的内建功能需要特别标明corejs。

可选项：

  • corejs：默认false，或者数字：{ corejs: 2 }，代表需要使用corejs的版本。

  • helpers：默认是true，是否替换helpers。

  • polyfill ：v7无该属性

  • regenerator：默认true，generator是否被转译成用regenerator runtime包装不污染全局作用域的代码。

  • useESModules：默认false，如果是true将不会用@babel/plugin-transform-modules-commonjs进行转译，这样会减小打包体积，因为不需要保持语义。

  • false:

exports.__esModule = true;

exports.default = function(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};
  • true:
export default function(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

babel-polyfill vs babel-runtime

以下出自：github -了解Babel 6生态

babel-polyfill 和 babel-runtime是达成同一种功能（模拟ES2015环境，包括global keywords，prototype methods，都基于core-js提供的一组polyfill和一个generator runtime）的两种方式：

  1. babel-polyfill通过向全局对象和内置对象的prototype上添加方法来达成目的。这意味着你一旦引入babel-polyfill，像Map，Array.prototype.find这些就已经存在了——全局空间被污染。

  2. babel-runtime不会污染全局空间和内置对象原型。事实上babel-runtime是一个模块，你可以把它作为依赖来达成ES2015的支持。

比如当前环境不支持Promise，你可以通过require(‘babel-runtime/core-js/promise’)来获取Promise。这很有用但不方便。幸运的是，babel-runtime并不是设计来直接使用的——它是和babel-plugin-transform-runtime一起使用的。babel-plugin-transform-runtime会自动重写你使用Promise的代码，转换为使用babel-runtime导出（export）的Promise-like对象。

注意： 所以plugin-transform-runtime一般用于开发（devDependencies），而runtime自身用于部署的代码（dependencies），两者配合来一起工作。

那么我们什么时候用babel-polyfill，什么时候用babel-runtime？

babel-polyfill会污染全局空间，并可能导致不同版本间的冲突，而babel-runtime不会。从这点看应该用babel-runtime。

但记住，babel-runtime有个缺点，它不模拟实例方法，即内置对象原型上的方法，所以类似Array.prototype.find，你通过babel-runtime是无法使用的。
最后，请不要一次引入全部的polyfills（如require('babel-polyfill')），这会导致代码量很大。请按需引用最好。

@babel/preset-env

以下出自：github -Babel 7 及新用法

preset-env 是 JS 中的 autoprefixer 根据环境来应用不同的plugins。支持的plugins超过babel-preset-latest(2015-2017)。

用法：

{
  "presets": [
    [
      "env",
      {
        "targets": { // 目标环境
          "browsers": [ // 浏览器
            "last 2 versions",
            "ie >= 10"
          ],
          "node": "current" // node
        },
        "modules": true,  // 是否转译module syntax，默认是 commonjs
        "debug": true, // 是否输出启用的plugins列表
        "spec": false, // 是否允许more spec compliant，但可能转译出的代码更慢
        "loose": false, // 是否允许生成更简单es5的代码，但可能不那么完全符合ES6语义
        "useBuiltIns": false, // 怎么运用 polyfill
        "include": [], // 总是启用的 plugins
        "exclude": [],  // 强制不启用的 plugins
        "forceAllTransforms": false, // 强制使用所有的plugins，用于只能支持ES5的uglify可以正确压缩代码
      }
    ]
  ],
}

这里主要需要注意的是useBuiltIns用于指定怎么处理polyfill，可以选值"usage" | "entry" | false，默认是false。

  • useBuiltIns: 'usage'：当每个文件里用到（需要polyfill的特性）时，在文件中添加特定的import语句。这可以保证每个polyfill的特性仅load一次。
/// input
var a = new Promise(); // a.js
var b = new Map(); // b.js
/// output
// a.js
import "core-js/modules/es6.promise";
var a = new Promise();
// b.js
import "core-js/modules/es6.map";
var b = new Map();
  • useBuiltIns: 'entry'：替换import "@babel/polyfill" / require("@babel/polyfill")语句为独立的（根据环境）需要引入的polyfill特性的import语句。
// input
import "@babel/polyfill";
// output
import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

需要注意，在整个项目中，"@babel/polyfill"只能require一次，否则报错。建议用独立的entry文件引入。

  • useBuiltIns: false：对@babel/polyfill不做任何处理。

ReferenceError: regeneratorRuntime is not defined
需要注意，当你使用async/await并被preset-env转译后，运行时可能会出现以上错误，这是因为：
plugin-transform-regenerator使用regenerator来转译 async/generator 函数，但是它本身不包括regeneratorRuntime，你需要使用babel-polyfill/regenerator runtime来使regeneratorRuntime 存在。

通常情况下，加上transform-runtime plugin即可。

参考文献：

作者：yozosann
链接：https://www.jianshu.com/p/d078b5f3036a
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350