用 polyfill.io 替换 babel-runtime答案

【问题标题】：Replace babel-runtime with polyfill.io用 polyfill.io 替换 babel-runtime
【发布时间】：2018-05-26 10:19:09
【问题描述】：

我正在尝试在我的 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']
            }
        },

当我从上述配置中删除 plugins 行时，包大小增加了大约 29KB。

难道不应该因为我从包中删除 polyfill 而减小包的大小吗？是什么导致捆绑包大小增加？

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

【问题讨论】：

标签： reactjs webpack babeljs polyfills babel-loader

【解决方案1】：

虽然运行时转换可以提供 polyfill，但它也有助于节省 Babel 必须注入的一些不能来自 polyfill 的小辅助函数的空间。实际上，您可以将运行时转换配置为完全不提供 polyfill，而在 Babel 7 中，他们实际上将其设为默认值。所以你实际上想要@babel/plugin-transform-runtime together 和 polyfill.io。

为什么下面的示例不能算作“polyfills”，但它们没有使用标准化的 API 类/函数，例如 Promise 或 Map，这似乎令人困惑，因为真正的 polyfills 可以将/monkeypatch 添加到您的节点环境中。

巴贝尔自己的解释：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 和压缩后，使用 import 语句可以降低每个模块的成本。

像物体静止分布这样的某些事情更具戏剧性。拿这个代码：

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

如果没有运行时转换，babel 必须内联一个 _objectWithoutProperties 辅助函数，这很昂贵，并且不是任何 polyfills 提供的：

"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"]);

【讨论】：