不导入 polyfill 的情况下消除“regeneratorRuntime 未定义”的错误

Question

我编写了一个元素库，并希望确保设计师只需将正确的源文件添加到他们的HTML页面中即可开始使用它。

我正在使用rollup创建一个捆绑包（将其卷起来成为一个文件）和babel（确保任何浏览器都可以使用它）。

我的rollup.conf非常简单：

import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import minify from 'rollup-plugin-babel-minify'

module.exports = [

  // IIFE
  {
    input: './tpe.js',
    output: {
      file: 'distr/tpe.js', // IIFE ONE FILE
      format: 'iife'
    },
    plugins: [resolve({}), babel({})]
  },

  {
    input: './themes/material/material.js',
    output: {
      file: 'distr/material.js', // IIFE ONE FILE
      format: 'iife'
    },
    plugins: [resolve({}), minify({})]
  }
]

请注意，./tpe.js 包含大量的引用。

import './ee-autocomplete-input-spans.js'
import './ee-autocomplete-item-country.js'
import './ee-autocomplete-item-email.js'
import './ee-autocomplete-item-li.js'
import './ee-autocomplete.js'
import './ee-drawer.js'
import './ee-fab.js'
import './ee-header.js'
import './ee-nav-bar.js'
import './ee-network.js'
import './ee-snack-bar.js'
import './ee-tabs.js'
...

我的 babel.conf.js 更加简单：

module.exports = function (api) {
  api.cache(true)

  const presets = [
    [
      '@babel/env', {
        modules: false,
        exclude: [],
        targets: {
          ie: "9"
        }
      }
    ]
  ]
  const plugins = []

  return {
    presets,
    plugins
  }

这一切都很好，但我必须要求我的用户这样做：

<script src="https://unpkg.com/@babel/polyfill/dist/polyfill.min.js"></script>
<script src="./distr/material.js"></script>
<script src="./distr/tpe.js"></script>

<nn-input-text id="input" name="aName"></nn-input-text>

没有polyfill.min.js，我会遇到可怕的regeneratorRuntime未定义错误。

我花费了数小时来确保我不需要要求用户拥有polyfill.min.js。

为了“修复”这个问题，我将以下内容添加到我的./tpe.js中:

import 'regenerator-runtime/runtime'
import './ee-autocomplete-input-spans.js'
import './ee-autocomplete-item-country.js'
import './ee-autocomplete-item-email.js'
import './ee-autocomplete-item-li.js'

这实际上使我只需要这个：

<script src="./distr/material.js"></script>
<script src="./distr/tpe.js"></script>

<nn-input-text id="input" name="aName"></nn-input-text>

问题：

• Babel is compiling things in node_modules, which in my case is exactly lit-html and lit-element (both ES6 source). I had problems at the beginning where lit-element (in node_modules) didn't compile. However, the problem disappeared and I don't know how/why.

• Is regenerator-runtime/runtime the ONLY thing I will ever need to polyfill? I am targeting IE9 after all...

• Is there a better way to add regenerator-runtime/runtime without having it in the includes in tpe.js?

• I read about "corejs" being important is it provides more polyfills. However, adding this

  useBuiltIns: "usage",
  corejs: 3
  

会产生许多警告。如果我在rollup.conf.js中加入一个如下的排除选项：

plugins: [resolve({}), babel({exclude: [/\/core-js\//]}), minify({})]

代码可以编译，但结果无法运行（Uncaught SyntaxError: Cannot use import statement outside a module）。 如果我改成：

    useBuiltIns: "entry",
    corejs: 3

我不需要"exclude"，但它似乎没有任何作用。 我是否真的需要corejs填充？

- Merc

Answer 1

我看到了你开的Github问题，并链接到了这篇文章。

我一直在尝试诊断这个设置和我在配置过程中遇到的问题。

请查看rollup-plugin-babel存储库上的推荐配置。

我也遇到了相同的问题，regeneratorRuntime未定义，并且无法弄清楚为什么polyfills没有像我希望/预期的那样被加载。

关键似乎是需要三个插件来处理这种情况。

// We need all 3 of these to end up with the 'usage'-based babel polyfills

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";

export default [
  {
    input: "src/index.js",
    output: {
      file: "dist/index.js",
      format: "iife"
    },
    plugins: [
      resolve(),
      babel({
        exclude: "node_modules/**",
        presets: [
          [
            "@babel/preset-env",
            {
              corejs: 3,
              modules: false,
              useBuiltIns: "usage",
              targets: {
                ie: "11"
              }
            }
          ]
        ]
      }),
      commonjs()
    ]
  }
];

这是我的package.json文件中的依赖项：

  "scripts": {
    "start": "rollup -c --compact --watch"
  }
  "dependencies": {
    "core-js": "^3.3.4",
    "regenerator-runtime": "^0.13.3"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "rollup": "^1.26.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
  }

我的输出 dist/index.js 最终包含了这个赋值给 regeneratorRuntime 的语句，在我使用以上三个rollup插件之前，这个语句是不存在的：

try {
  regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
  // This module should not be running in strict mode, so the above
  // assignment should always work unless something is misconfigured. Just
  // in case runtime.js accidentally runs in strict mode, we can escape
  // strict mode using a global Function call. This could conceivably fail
  // if a Content Security Policy forbids using Function, but in that case
  // the proper solution is to fix the accidental strict mode problem. If
  // you've misconfigured your bundler to force strict mode and applied a
  // CSP to forbid Function, and you're not willing to fix either of those
  // problems, please detail your unique predicament in a GitHub issue.
  Function("r", "regeneratorRuntime = r")(runtime);
}

- seangwright