时间戳

首页 > 解决方案 > 如何使用汇总在 babel 中为外部库添加 polyfill

babeljs - 如何使用汇总在 babel 中为外部库添加 polyfill

问题描述

我正在使用汇总来构建我的 (AMD/UMD) 项目。使用 ES 功能的库有一个外部依赖项，例如：Map、Symbol、Array.from 等，Internet Explorer 不支持这些功能。由于库是外部的，babel 似乎没有转译库，这意味着这些功能永远不会被填充。

有没有办法通过@babel/preset-env 告诉 babel 包含这个用于 polyfill 的库？

我的汇总配置如下所示：

{
  // omitted ...
  external: [
    'vue',
    /^@pnp.*/, // uses Map, Symbol, Array.from, ...
  ],
  plugins: [
    babel ({
      configFile: false,
      runtimeHelpers: true,
      exclude: /node_modules\/(?!vue-runtime-helpers)/,
      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx', '.vue'],
      presets: [
        ['@babel/preset-env', {
          corejs: 3,
          useBuiltIns: 'usage',
          ignoreBrowserslistConfig: false,
          targets: {
            browsers: browserslist, // includes IE11
          },
        }],
      ],
    }),
  ]
}

vue似乎可以作为外部依赖项 OOTB 工作，因为它们提供了与 IE 兼容的构建，而 pnpjs 则没有。

标签： babeljsrollupjs

解决方案

Babel 将无法检测到外部模块所需的 polyfill，但您可以将其包含@pnp/polyfill-ie11在您的应用程序中。确保不要将其标记为外部。

推荐阅读