From 318cb43380ed05c1f5490f6127ca358711c3b764 Mon Sep 17 00:00:00 2001 From: patak Date: Tue, 27 Jul 2021 23:11:45 +0200 Subject: [PATCH] refactor: deprecate polyfillDynamicImport (#4373) --- docs/config/index.md | 17 --- docs/guide/backend-integration.md | 7 - .../multiple-entrypoints/vite.config.js | 1 - packages/vite/src/node/build.ts | 4 +- packages/vite/src/node/config.ts | 19 +++ .../src/node/plugins/dynamicImportPolyfill.ts | 144 ------------------ packages/vite/src/node/plugins/html.ts | 6 - .../src/node/plugins/importAnalysisBuild.ts | 8 +- packages/vite/src/node/plugins/index.ts | 2 - 9 files changed, 22 insertions(+), 186 deletions(-) delete mode 100644 packages/vite/src/node/plugins/dynamicImportPolyfill.ts diff --git a/docs/config/index.md b/docs/config/index.md index b92b779646733a..22405f2b213fe6 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -543,23 +543,6 @@ createServer() Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See [esbuild docs](https://esbuild.github.io/content-types/#javascript) for more details. -### build.polyfillDynamicImport - -- **Type:** `boolean` -- **Default:** `false` - - Whether to automatically inject [dynamic import polyfill](https://github.com/GoogleChromeLabs/dynamic-import-polyfill). - - If set to true, the polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-html custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry: - - ```js - import 'vite/dynamic-import-polyfill' - ``` - - When using [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy), the plugin sets this option to `true` automatically. - - Note: the polyfill does **not** apply to [Library Mode](/guide/build#library-mode). If you need to support browsers without native dynamic import, you should probably avoid using it in your library. - ### build.outDir - **Type:** `string` diff --git a/docs/guide/backend-integration.md b/docs/guide/backend-integration.md index a1fb6abafd2ebb..0e03b9a7c2f0e4 100644 --- a/docs/guide/backend-integration.md +++ b/docs/guide/backend-integration.md @@ -20,13 +20,6 @@ Or you can follow these steps to configure it manually: }) ``` - If you use [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) or manually enable the [`build.dynamicImportPolyfill` option](/config/#build-polyfilldynamicimport), remember to add the [dynamic import polyfill](/config/#build-polyfilldynamicimport) to your entry, since it will no longer be auto-injected: - - ```js - // add the beginning of your app entry - import 'vite/dynamic-import-polyfill' - ``` - 2. For development, inject the following in your server's HTML template (substitute `http://localhost:3000` with the local URL Vite is running at): ```html diff --git a/packages/playground/multiple-entrypoints/vite.config.js b/packages/playground/multiple-entrypoints/vite.config.js index a3e0c24ebb477d..c2a44858a3ce6b 100644 --- a/packages/playground/multiple-entrypoints/vite.config.js +++ b/packages/playground/multiple-entrypoints/vite.config.js @@ -5,7 +5,6 @@ module.exports = { build: { outDir: './dist', emptyOutDir: true, - polyfillDynamicImport: false, rollupOptions: { preserveEntrySignatures: 'strict', input: { diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 73d4f216d2118a..6d227a8ff0bc33 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -68,6 +68,7 @@ export interface BuildOptions { * whether to inject dynamic import polyfill. * Note: does not apply to library mode. * @default false + * @deprecated use plugin-legacy for browsers that don't support dynamic import */ polyfillDynamicImport?: boolean /** @@ -204,13 +205,12 @@ export interface LibraryOptions { export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife' export type ResolvedBuildOptions = Required< - Omit + Omit > export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions { const resolved: ResolvedBuildOptions = { target: 'modules', - polyfillDynamicImport: false, outDir: 'dist', assetsDir: 'assets', assetsInlineLimit: 4096, diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 59c99cb2b8f46c..bef928f78d69e5 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -528,6 +528,25 @@ export async function resolveConfig( } }) + if (config.build?.polyfillDynamicImport) { + logDeprecationWarning( + 'build.polyfillDynamicImport', + '"polyfillDynamicImport" has been removed. Please use @vitejs/plugin-legacy if your target browsers do not support dynamic imports.' + ) + } + + Object.defineProperty(resolvedBuildOptions, 'polyfillDynamicImport', { + enumerable: false, + get() { + logDeprecationWarning( + 'build.polyfillDynamicImport', + '"polyfillDynamicImport" has been removed. Please use @vitejs/plugin-legacy if your target browsers do not support dynamic imports.', + new Error() + ) + return false + } + }) + if (config.build?.cleanCssOptions) { logDeprecationWarning( 'build.cleanCssOptions', diff --git a/packages/vite/src/node/plugins/dynamicImportPolyfill.ts b/packages/vite/src/node/plugins/dynamicImportPolyfill.ts deleted file mode 100644 index e5f941f0e60bd6..00000000000000 --- a/packages/vite/src/node/plugins/dynamicImportPolyfill.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { ResolvedConfig } from '..' -import { Plugin } from '../plugin' -import { isModernFlag } from './importAnalysisBuild' -import path from 'path' - -export const polyfillId = 'vite/dynamic-import-polyfill' - -function resolveModulePath(config: ResolvedConfig) { - const { - base, - build: { assetsDir } - } = config - // #2918 path.posix.join returns a wrong path when config.base is a URL - if (/^(https?:)?(\/\/)/i.test(base)) { - return `${base.replace(/\/$/, '')}/${assetsDir}/` - } - return path.posix.join(base, assetsDir, '/') -} - -export function dynamicImportPolyfillPlugin(config: ResolvedConfig): Plugin { - const enabled = config.build.polyfillDynamicImport - const skip = !enabled || config.command === 'serve' || config.build.ssr - let polyfillString: string | undefined - - return { - name: 'vite:dynamic-import-polyfill', - resolveId(id) { - if (id === polyfillId) { - return id - } - }, - load(id) { - if (id === polyfillId) { - if (!enabled && config.command === 'build') { - config.logger.warnOnce( - `\n'vite/dynamic-import-polyfill' is no longer needed if you target modern browsers` - ) - } - if (skip) { - return '' - } - // return a placeholder here and defer the injection to renderChunk - // so that we can selectively skip the injection based on output format - if (!polyfillString) { - polyfillString = - `const p = ${polyfill.toString()};` + - `${isModernFlag}&&p(${JSON.stringify(resolveModulePath(config))});` - } - return polyfillString - } - }, - - renderDynamicImport({ format }) { - if (skip || format !== 'es') { - return null - } - if (!polyfillString) { - throw new Error( - `Vite's dynamic import polyfill is enabled but was never imported. This ` + - `should only happen when using custom non-html rollup inputs. Make ` + - `sure to add \`import "${polyfillId}"\` as the first statement in ` + - `your custom entry.` - ) - } - // we do not actually return anything here because rewriting here would - // make it impossible to use es-module-lexer on the rendered chunks, which - // we need for import graph optimization in ./importAnalysisBuild. - } - } -} - -/** -The following polyfill function is meant to run in the browser and adapted from -https://github.com/GoogleChromeLabs/dynamic-import-polyfill -MIT License -Copyright (c) 2018 uupaa and 2019 Google LLC -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -*/ - -declare const self: any -declare const location: any -declare const document: any -declare const URL: any -declare const Blob: any - -function polyfill(modulePath = '.', importFunctionName = '__import__') { - try { - self[importFunctionName] = new Function('u', `return import(u)`) - } catch (error) { - const baseURL = new URL(modulePath, location) - const cleanup = (script: any) => { - URL.revokeObjectURL(script.src) - script.remove() - } - - self[importFunctionName] = (url: string) => - new Promise((resolve, reject) => { - const absURL = new URL(url, baseURL) - - // If the module has already been imported, resolve immediately. - if (self[importFunctionName].moduleMap[absURL]) { - return resolve(self[importFunctionName].moduleMap[absURL]) - } - - const moduleBlob = new Blob( - [ - `import * as m from '${absURL}';`, - `${importFunctionName}.moduleMap['${absURL}']=m;` - ], - { type: 'text/javascript' } - ) - - const script = Object.assign(document.createElement('script'), { - type: 'module', - src: URL.createObjectURL(moduleBlob), - onerror() { - reject(new Error(`Failed to import: ${url}`)) - cleanup(script) - }, - onload() { - resolve(self[importFunctionName].moduleMap[absURL]) - cleanup(script) - } - }) - - document.head.appendChild(script) - }) - - self[importFunctionName].moduleMap = {} - } -} diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index b2c109b6878ea9..703dcd9c010f85 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -20,7 +20,6 @@ import { getAssetFilename } from './asset' import { isCSSRequest, chunkToEmittedCssFileMap } from './css' -import { polyfillId } from './dynamicImportPolyfill' import { AttributeNode, NodeTransform, @@ -264,11 +263,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { processedHtml.set(id, s.toString()) - // inject dynamic import polyfill - if (config.build.polyfillDynamicImport) { - js = `import "${polyfillId}";\n${js}` - } - return js } }, diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index fd57a45cf7014a..4e9a12f07148c3 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -212,7 +212,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { return } - const isPolyfillEnabled = config.build.polyfillDynamicImport for (const file in bundle) { const chunk = bundle[file] // can't use chunk.dynamicImports.length here since some modules e.g. @@ -229,12 +228,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { if (imports.length) { const s = new MagicString(code) for (let index = 0; index < imports.length; index++) { - const { s: start, e: end, d: dynamicIndex } = imports[index] - // if dynamic import polyfill is used, rewrite the import to - // use the polyfilled function. - if (isPolyfillEnabled) { - s.overwrite(dynamicIndex, dynamicIndex + 6, `__import__`) - } + const { s: start, e: end } = imports[index] // check the chunk being imported const url = code.slice(start, end) const deps: Set = new Set() diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts index cf982fcd0b4482..39f672256c2699 100644 --- a/packages/vite/src/node/plugins/index.ts +++ b/packages/vite/src/node/plugins/index.ts @@ -10,7 +10,6 @@ import { assetPlugin } from './asset' import { clientInjectionsPlugin } from './clientInjections' import { htmlInlineScriptProxyPlugin } from './html' import { wasmPlugin } from './wasm' -import { dynamicImportPolyfillPlugin } from './dynamicImportPolyfill' import { webWorkerPlugin } from './worker' import { preAliasPlugin } from './preAlias' import { definePlugin } from './define' @@ -31,7 +30,6 @@ export async function resolvePlugins( isBuild ? null : preAliasPlugin(), aliasPlugin({ entries: config.resolve.alias }), ...prePlugins, - dynamicImportPolyfillPlugin(config), resolvePlugin({ ...config.resolve, root: config.root,