语言►nodejs►库►babel

babel中的runtime和plugin-transform-runtime

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/09/babel%E4%B8%AD%E7%9A%84runtime%E5%92%8Cplugin-transform-runtime/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 示例

正文

作用

babel 使用辅助函数来实现常见功能，例如：_extend()。

每个编译后的文件都需要定义它所需要使用的辅助函数。

这种重复显然不是必须的。

于是 babel 把所有的辅助函数都封装于@babel/runtime，每个编译后的文件只需要引用@babel/runtime即可。

@babel/plugin-transform-runtime用于将每个编译后的文件中定义的辅助函数转换为对@babel/runtime的引用。

安装

1
2
3
4
#!/usr/bin/env bash

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

示例

使用前

learn_babel/babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 11,
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
  ],
  plugins: [],
};

源文件：

learn_babel/index.js

1
class Animal {}

输出：

learn_babel/index.compiled.js

1
2
3
4
5
6
7
8
9
10
11
'use strict';

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

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

使用后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 11,
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
  ],
  plugins: ['@babel/plugin-transform-runtime'],
};

源文件：

learn_babel/index.js

1
class Animal {}

输出：

learn_babel/index.compiled.js

1
2
3
4
5
6
7
8
9
10
11
'use strict';

var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

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

var Animal = function Animal() {
  (0, _classCallCheck2.default)(this, Animal);
};

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/09/babel%E4%B8%AD%E7%9A%84runtime%E5%92%8Cplugin-transform-runtime/

本文对你有帮助？请支持我

支付宝
微信