Question

我尝试在我的React应用程序中使用polyfill.io替换babel-runtime和babel-plugin-transform-runtime。我目前的webpack配置是：

module: {
    rules: [
        {
            test: /.jsx?$/,
            loader: 'babel-loader',
            include: [path.resolve(__dirname, "src")],
            query: {
                presets: ['env', 'react', 'stage-0'],
                plugins: ['transform-runtime']
            }
        },

当我从上面的配置中删除插件行时，捆绑包大小增加了大约29KB。

捆绑尺寸不应该减少，因为我要从捆绑中移除polyfills？是什么导致捆绑大小增加？

从babel-runtime切换到polyfill.io的正确方法是什么？

Answer 1

虽然运行时转换可以提供polyfill，但它还可以帮助节省Babel必须注入的，不是来自polyfill的一堆小辅助函数上的空间。实际上，您可以将运行时转换配置为不完全提供polyfill，而在Babel 7中，它们实际上将其设置为默认值。因此，您实际上希望将@babel/plugin-transform-runtime与em一起与polyfill.io一起使用。

下面的示例为什么不算作“ polyfills”，却没有使用诸如标准的API类/函数（例如Promise或Map），而真正的polyfill可以在其中添加/ monkeypatch您的节点环境。

Babel自己的解释：https://babeljs.io/docs/en/babel-plugin-transform-runtime#why

例如简单的导入默认语句

import foo from 'bar'

Babel必须在执行此操作的每个模块中注入一个辅助函数的副本：

"use strict";

var _bar = _interopRequireDefault(require("bar"));

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

但是通过运行时转换，它可以导入_interopRequireDefault的实现，在所有模块之间共享实现：

"use strict";

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

var _bar = _interopRequireDefault(require("bar"));

应用Webpack和缩小功能后，使用导入语句可以降低每个模块的成本。

诸如对象剩余散布之类的某些事情更具戏剧性。输入以下代码：

const {bar, ...baz} = {}

在没有运行时转换的情况下，babel必须内联一个昂贵的_objectWithoutProperties帮助程序函数，而该函数不是任何polyfill所提供的：

"use strict";

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var _ref = {},
    bar = _ref.bar,
    baz = _objectWithoutProperties(_ref, ["bar"]);

但是使用运行时转换_objectWithoutProperties可以在使用它的所有对象之间共享：

"use strict";

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

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _ref = {},
    bar = _ref.bar,
    baz = (0, _objectWithoutProperties2["default"])(_ref, ["bar"]);

用polyfill.io替换babel-runtime

1 个答案: