Избавьтесь от «регенераторRuntime не определен» без импорта полифилл

Question

Я написал библиотеку элементов и хочу убедиться, что дизайнеры могут просто добавить нужный исходный файл на свои HTML-страницы, чтобы начать его использовать. Я создаю пакет, используя накопительный пакет (чтобы свернуть его в один файл) и 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'
...

My 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, которые в моем случае точно освещены и освещены-элемент (оба источника 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?

Answer 1

Я видел проблему Github, которую вы открыли и связал с этим сообщением.

Я также пытался диагностировать эту настройку и проблемы, с которыми я столкнулся, пытаясь ее настроить.

Ознакомьтесь с этой рекомендованной конфигурацией в rollup-plugin-babel repo.

Я столкнулся с той же проблемой с 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);
}