#javascript #rollup #polyfills
Вопрос:
У меня есть следующее rollup.config.js :
// Import rollup plugins import html from '@web/rollup-plugin-html'; import polyfillsLoader from '@web/rollup-plugin-polyfills-loader'; import {copy} from '@web/rollup-plugin-copy'; import resolve from '@rollup/plugin-node-resolve'; import {getBabelOutputPlugin} from '@rollup/plugin-babel'; import {terser} from 'rollup-plugin-terser'; import minifyHTML from 'rollup-plugin-minify-html-literals'; import summary from 'rollup-plugin-summary'; // Configure an instance of @web/rollup-plugin-html const htmlPlugin = html({ rootDir: './', flattenOutput: false, }); export default { // Entry point for application build; can specify a glob to build multiple // HTML files for non-SPA app input: 'index.html', plugins: [ htmlPlugin, // Resolve bare module specifiers to relative paths resolve(), // Minify HTML template literals minifyHTML(), // Minify JS terser({ module: true, warnings: true, }), // Inject polyfills into HTML (core-js, regnerator-runtime, webcoponents, // lit/polyfill-support) and dynamically loads modern vs. legacy builds polyfillsLoader({ modernOutput: { name: 'modern', }, // Feature detection for loading legacy bundles legacyOutput: { name: 'legacy', test: '!!Array.prototype.flat', type: 'systemjs', }, // List of polyfills to inject (each has individual feature detection) polyfills: { hash: true, coreJs: true, regeneratorRuntime: true, fetch: true, webcomponents: true, // Custom configuration for loading Lit's polyfill-support module, // required for interfacing with the webcomponents polyfills custom: [ { name: 'lit-polyfill-support', path: 'node_modules/lit/polyfill-support.js', test: "!('attachShadow' in Element.prototype)", module: false, }, ], }, }), // Print bundle summary summary(), // Optional: copy any static assets to build directory copy({ patterns: ['data/**/*', 'images/**/*'], }), ], // Specifies two JS output configurations, modern and legacy, which the HTML plugin will // automatically choose between; the legacy build is compiled to ES5 // and SystemJS modules output: [ { // Modern JS bundles (no JS compilation, ES module output) format: 'esm', chunkFileNames: '[name]-[hash].js', entryFileNames: '[name]-[hash].js', dir: 'build', plugins: [htmlPlugin.api.addOutput('modern')], }, { // Legacy JS bundles (ES5 compilation and SystemJS module output) format: 'esm', chunkFileNames: 'legacy-[name]-[hash].js', entryFileNames: 'legacy-[name]-[hash].js', dir: 'build', plugins: [ htmlPlugin.api.addOutput('legacy'), // Uses babel to compile JS to ES5 and modules to SystemJS getBabelOutputPlugin({ compact: true, presets: [ [ '@babel/preset-env', { targets: { ie: '11', }, modules: 'systemjs', }, ], ], }), ], }, ], preserveEntrySignatures: false, }; Самостоятельная сборка выполняется успешно, однако при попытке доступа к сайту, независимо от того, какой браузер я использую, я продолжаю получать:
Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined Кто-нибудь может сказать мне, что я сделал не так?
Ответ №1:
Прошло почти 2 года с тех пор, как я в последний раз использовал накопительный пакет. Во всяком случае, в проекте, который я нашел (где мы столкнулись с теми же проблемами), я увидел следующий порядок плагинов:
plugins: [ [ '@babel/plugin-transform-runtime', ], ["@babel/plugin-proposal-optional-chaining"], ["@babel/plugin-proposal-nullish-coalescing-operator"], ["babel-plugin-transform-for-of-without-iterator"], ] Это @babel/plugin-transform-runtime творит волшебство.
npm i @babel/plugin-transform-runtime Устанавливать