diff --git a/docs/config/index.md b/docs/config/index.md index 3f7f798332095f..070f86ee98211e 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -165,20 +165,13 @@ export default ({ command, mode }) => { - **Type:** `string | RegExp | (string | RegExp)[]` - **Related:** [Asset Handling](/guide/features#asset-handling) - Specify additional file types to be treated as static assets (so that importing them will return their resolved URL). + Specify additional file types to be treated as static assets so that: -### transformInclude + - They will be excluded from the plugin transform pipeline when referenced from HTML or directly requested over `fetch` or XHR. -- **Type:** `string | RegExp | (string | RegExp)[]` - - By default, all statically analyzable `import` requests in your code are statically treated as part of the transform pipeline. However, if you are using full dynamic import to import non-js file types, for example: - - ```js - // dynamicPath is a non-JS file type, e.g. "./foo.gql" - import(dynamicPath).then(/* ... */) - ``` + - Importing them from JS will return their resolved URL string (this can be overwritten if you have a `enforce: 'pre'` plugin to handle the asset type differently). - Vite will not be able to know that the file needs to be transformed to JavaScript (instead of being served directly as a static file). `transformInclude` allows you to explicitly declare the file type to always be transformed and served as JavaScript. + The built-in asset type list can be found [here](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts). ### dedupe diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md index c7bf052b45ea62..2dd1e0ede9bdf0 100644 --- a/docs/guide/api-plugin.md +++ b/docs/guide/api-plugin.md @@ -41,14 +41,6 @@ export default function myPlugin() { return { name: 'transform-file', - config() { - return { - // this is necessary for Vite to know that the file format should be - // handled as JS when it's used in import(dynamicPath) calls. - transformInclude: fileRegex - } - }, - transform(src, id) { if (fileRegex.test(id)) { return { diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index df786e2f7efcab..e1b8f9673a9ffa 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -67,11 +67,6 @@ export interface UserConfig { * Or set to `false` to disable esbuild. */ esbuild?: ESBuildOptions | false - /** - * Specify additional files to be treated as source file (included into the - * transform pipeline). - */ - transformInclude?: string | RegExp | (string | RegExp)[] /** * Specify additional files to be treated as static assets. */ @@ -101,7 +96,7 @@ export interface UserConfig { } export type ResolvedConfig = Readonly< - Omit & { + Omit & { configPath: string | undefined inlineConfig: UserConfig root: string @@ -114,7 +109,6 @@ export type ResolvedConfig = Readonly< server: ServerOptions build: Required assetsInclude: (file: string) => boolean - transformInclude: (file: string) => boolean logger: Logger } > @@ -195,9 +189,6 @@ export async function resolveConfig( const assetsFilter = config.assetsInclude ? createFilter(config.assetsInclude) : () => false - const transformFilter = config.transformInclude - ? createFilter(config.transformInclude) - : () => false const resolved = { ...config, @@ -222,9 +213,6 @@ export async function resolveConfig( assetsInclude(file: string) { return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file) }, - transformInclude(file: string) { - return transformFilter(file) - }, logger: createLogger(config.logLevel) } @@ -278,7 +266,7 @@ function mergeConfig( if (key === 'alias') { merged[key] = mergeAlias(existing, value) continue - } else if (key === 'transformInclude' || key === 'assetsInclude') { + } else if (key === 'assetsInclude') { merged[key] = [].concat(existing, value) continue } diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts index 1b2ba9877c8a8e..17e5626573dc72 100644 --- a/packages/vite/src/node/constants.ts +++ b/packages/vite/src/node/constants.ts @@ -19,15 +19,37 @@ export const CLIENT_PUBLIC_PATH = `/@vite/client` export const CLIENT_ENTRY = require.resolve('vite/dist/client/client.js') export const CLIENT_DIR = path.dirname(CLIENT_ENTRY) +const knownAssetTypes = [ + // images + 'png', + 'jpe?g', + 'gif', + 'svg', + 'ico', + 'webp', + 'avif', + + // media + 'mp4', + 'webm', + 'ogg', + 'mp3', + 'wav', + 'flac', + 'aac', + + // fonts + 'woff2?', + 'eot', + 'ttf', + 'otf', + + // other + 'wasm' +] + export const DEFAULT_ASSETS_RE = new RegExp( - `\\.(` + - // images - `png|jpe?g|gif|svg|ico|webp|` + - // media - `mp4|webm|ogg|mp3|wav|flac|aac|` + - // fonts - `woff2?|eot|ttf|otf` + - `)(\\?.*)?$` + `\\.(` + knownAssetTypes.join('|') + `)(\\?.*)?$` ) export const DEP_VERSION_RE = /[\?&](v=[\w\.-]+)\b/ diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts index 3c1e844b227e70..c2b3d3aae38b3e 100644 --- a/packages/vite/src/node/server/middlewares/transform.ts +++ b/packages/vite/src/node/server/middlewares/transform.ts @@ -31,7 +31,7 @@ export function transformMiddleware( server: ViteDevServer ): Connect.NextHandleFunction { const { - config: { root, logger }, + config: { root, logger, assetsInclude }, moduleGraph } = server @@ -78,16 +78,12 @@ export function transformMiddleware( ) } - // Only apply the transform pipeline to: - // - requests that initiate from ESM imports (any extension) - // - CSS (even not from ESM) - // - Source maps (only for resolving) if ( isJSRequest(url) || isImportRequest(url) || isCSSRequest(url) || isHTMLProxy(url) || - server.config.transformInclude(withoutQuery) + (req.headers.accept === '*/*' && !assetsInclude(withoutQuery)) ) { // strip ?import url = removeImportQuery(url)