javascript - 在应用程序中包含 Polyfill 包

Question

我的应用程序需要支持 IE，因此我决定使用 polyfill.io 来支持 ES6 功能。 https://polyfill.io/v3/

它给了我一个网址，但我不确定如何实际使用它。我正在使用 webpack，但到目前为止我找不到解决方案。

我最后一次尝试是尝试使用 ajax 请求加载它

//Version 1
$.ajax({
  type: 'GET',
  url: "https://polyfill.io/v3/polyfill.min.js?features=String.prototype.includes",
  success: Srv.main,
  dataType: 'script',
}).done(() => appStart());

//Version 2
$.getScript("https://polyfill.io/v3/polyfill.min.js?features=String.prototype.includes", function (data, textStatus, jqxhr) {
 appStart();
});

两者似乎都返回了脚本，事实上它一开始似乎可以工作，appStart 中的 String.include 没有错误。但是我在使用这些方法的其他模块中遇到了错误。那么它似乎不是全局可用的？

我希望得到一些帮助，也许有人可以使用 webpack 找到一种更简单的解决方案？

提前致谢!

Answer 1

我会使用core-js以便将 ECMAscript 功能填充到您的应用程序中。

npm i core-js

import 'core-js/stable'; // <- at the top of your entry point

Array.from(new Set([1, 2, 3, 2, 1]));          // => [1, 2, 3]
[1, [2, 3], [4, [5]]].flat(2);                 // => [1, 2, 3, 4, 5]
Promise.resolve(32).then(x => console.log(x)); // => 32

编辑

如果您只想包含需要的内容，可以编辑 .babelrc 文件以包含“useBuiltIns”选项

// .babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": [
        "Last 2 versions",
      ]

      // This option configures how @babel/preset-env handles polyfills. The 'usage' value imports
      // only the specific polyfill module when they are used in each file.
      "useBuiltIns": "usage"
    }]
  ],
}