在不导入填充代码的情况下摆脱"regeneratorRuntime is not defined"

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 is not defined.

我花了几个小时，几个小时，几个小时试图确保我不需要要求用户拥有那个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 正在用 node_modules 编译东西，在我的例子中，它完全是 lit-html 和 lit-element(都是 ES6 源代码(。一开始我遇到了 lit-element(node_modules(无法编译的问题。但是，问题消失了，我不知道如何/为什么。

• regenerator-runtime/runtime是我唯一需要填充的东西吗？毕竟我的目标是IE9...

• 有没有更好的方法来添加regenerator-runtime/runtime而不将其包含在 tpe.js 的包含中？

• 我读到"corejs"很重要，因为它提供了更多的填充物。但是，添加此

  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

我不需要"排除"，但它似乎什么也没做。 我真的需要 corejs polyfill 吗？

Answer 1

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

我也一直在尝试诊断此设置以及我在尝试配置它时遇到的问题。

在 rollup-plugin-babel 存储库中查看此推荐配置。

我在regeneratorRuntime is not defined遇到了同样的问题，并且无法弄清楚为什么没有像我希望/预期的那样加载填充物。

关键似乎是此用例需要 3 个插件。

// 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的这个分配，在我拥有上述所有 3 个汇总插件之前，这不存在：

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);
}