javascript - 如何在生产包中包含 corejs polyfill？

Question

我eleventy用来创建一个带有少量 JavaScript 的静态站点。我没有使用webpack或其他捆绑器。eleventy通过sbeforeBuild事件调用“transformFileAsync”来转换 JavaScript 。这是配置的相关部分eleventy：

babel.transformFileAsync("src/assets/js/index.js").then((result) => {
      fs.outputFile("dist/assets/main.js", result.code, (err) => {
        if (err) throw err;
        console.log("JS transpiled.");
      });
    });

我babel.config.js的如下：

module.exports = (api) => {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        bugfixes: true,
        modules: "systemjs",
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true },
      },
    ],
  ];

  const plugins = [];

  return { presets, plugins };
};

Babel 像宣传的那样工作，并且js可以很好地转换我的内容。但是我不知道如何corejs在最终的生产包中包含（没有捆绑器的帮助）polyfills。

例如，下面的代码：

Array.from(document.getElementsByTagName("p")).forEach((p) => {
  console.log(`p ${index}, startsWith('W')`, p, p.innerHTML.startsWith("W"));
});

被转译为：

import "core-js/modules/es.array.for-each";
import "core-js/modules/es.array.from";
import "core-js/modules/es.string.iterator";
import "core-js/modules/es.string.starts-with";
import "core-js/modules/web.dom-collections.for-each";
System.register([], function (_export, _context) {
  "use strict";

  return {
    setters: [],
    execute: function () {
      Array.from(document.getElementsByTagName("p")).forEach(function (p) {
        console.log("p ".concat(index, ", startsWith('W')"), p, p.innerHTML.startsWith("W"));
      });
    }
  };
});

我将如何在最终包中使用实际的 polyfill 而不是所有的imports？

标签： javascriptbabeljseleventy