一文弄懂Vite 配置文件

背气囊的熊

我们知道，Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置。那接下来，我就与你分析配置解析过程中 Vite 到底做了什么？即Vite是如何加载配置文件的。
流程梳理
我们先来梳理整体的流程，Vite 中的配置解析由 resolveConfig 函数来实现，你可以对照源码一起学习。

加载配置文件

进行一些必要的变量声明后，我们进入到解析配置逻辑中，配置文件的源码如下：

1. // 这里的 config 是命令行指定的配置，如 vite --configFile=xxx
   
2. let { configFile } = config
   
3. if (configFile !== false) {
   
4.   // 默认都会走到下面加载配置文件的逻辑，除非你手动指定 configFile 为 false
   
5.   const loadResult = await loadConfigFromFile(
   
6.     configEnv,
   
7.     configFile,
   
8.     config.root,
   
9.     config.logLevel
   
10.   )
    
11.   if (loadResult) {
    
12.     // 解析配置文件的内容后，和命令行配置合并
    
13.     config = mergeConfig(loadResult.config, config)
    
14.     configFile = loadResult.path
    
15.     configFileDependencies = loadResult.dependencies
    
16.   }
    
17. }

复制代码

第一步是解析配置文件的内容，然后与命令行配置合并。值得注意的是，后面有一个记录 configFileDependencies 的操作。因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。

解析用户插件

第二个重点环节是 解析用户插件。首先，我们通过 apply 参数 过滤出需要生效的用户插件。为什么这么做呢？因为有些插件只在开发阶段生效，或者说只在生产环境生效，我们可以通过 apply: 'serve' 或 'build' 来指定它们，同时也可以将 apply 配置为一个函数，来自定义插件生效的条件。解析代码如下：

1. // resolve plugins
   
2. const rawUserPlugins = (config.plugins || []).flat().filter((p) => {
   
3.   if (!p) {
   
4.     return false
   
5.   } else if (!p.apply) {
   
6.     return true
   
7.   } else if (typeof p.apply === 'function') {
   
8.      // apply 为一个函数的情况
   
9.     return p.apply({ ...config, mode }, configEnv)
   
10.   } else {
    
11.     return p.apply === command
    
12.   }
    
13. }) as Plugin[]
    
14. // 对用户插件进行排序
    
15. const [prePlugins, normalPlugins, postPlugins] =
    
16.   sortUserPlugins(rawUserPlugins)

复制代码

接着，Vite 会拿到这些过滤且排序完成的插件，依次调用插件 config 钩子，进行配置合并。

1. // run config hooks
   
2. const userPlugins = [...prePlugins, ...normalPlugins, ...postPlugins]
   
3. for (const p of userPlugins) {
   
4.   if (p.config) {
   
5.     const res = await p.config(config, configEnv)
   
6.     if (res) {
   
7.       // mergeConfig 为具体的配置合并函数，大家有兴趣可以阅读一下实现
   
8.       config = mergeConfig(config, res)
   
9.     }
   
10.   }
    
11. }

复制代码

然后，解析项目的根目录即 root 参数，默认取 process.cwd()的结果。

1. // resolve root
   
2. const resolvedRoot = normalizePath(
   
3.   config.root ? path.resolve(config.root) : process.cwd()
   
4. )

复制代码

紧接着处理 alias ，这里需要加上一些内置的 alias 规则，如 @vite/env、@vite/client 这种直接重定向到 Vite 内部的模块。

1. // resolve alias with internal client alias
   
2. const resolvedAlias = mergeAlias(
   
3.   clientAlias,
   
4.   config.resolve?.alias || config.alias || []
   
5. )
   
6. 
   
7. 
   
8. const resolveOptions: ResolvedConfig['resolve'] = {
   
9.   dedupe: config.dedupe,
   
10.   ...config.resolve,
    
11.   alias: resolvedAlias
    
12. }

复制代码

加载环境变量

加载环境变量的实现代码如下:

1. // load .env files
   
2. const envDir = config.envDir
   
3.   ? normalizePath(path.resolve(resolvedRoot, config.envDir))
   
4.   : resolvedRoot
   
5. const userEnv =
   
6.   inlineConfig.envFile !== false &&
   
7.   loadEnv(mode, envDir, resolveEnvPrefix(config))

复制代码

loadEnv 其实就是扫描 process.env 与 .env文件，解析出 env 对象，值得注意的是，这个对象的属性最终会被挂载到 import.meta.env 这个全局对象上。解析 env 对象的实现思路如下:

• 遍历 process.env 的属性，拿到指定前缀开头的属性（默认指定为VITE_），并挂载 env 对象上
  
• 遍历 .env 文件，解析文件，然后往 env 对象挂载那些以指定前缀开头的属性。遍历的文件先后顺序如下(下面的 mode 开发阶段为 development，生产环境为production)
  

特殊情况下，如果中途遇到 NODE_ENV 属性，则挂到  process.env.VITE_USER_NODE_ENV，Vite 会优先通过这个属性来决定是否走生产环境的构建。
接下来，是对资源公共路径即 base URL 的处理，逻辑集中在 resolveBaseUrl 函数当中：

1. // 解析 base url
   
2. const BASE_URL = resolveBaseUrl(config.base, command === 'build', logger)
   
3. // 解析生产环境构建配置
   
4. const resolvedBuildOptions = resolveBuildOptions(config.build)

复制代码

resolveBaseUrl 里面有这些处理规则需要注意：

• 空字符或者 ./ 在开发阶段特殊处理，全部重写为 /
  
• .开头的路径，自动重写为 /
  
• 以 http(s):// 开头的路径，在开发环境下重写为对应的 pathname
  
• 确保路径开头和结尾都是 /
  

当然，还有对 cacheDir 的解析，这个路径相对于在 Vite 预编译时写入依赖产物的路径：

1. // resolve cache directory
   
2. const pkgPath = lookupFile(resolvedRoot, [`package.json`], true /* pathOnly */)
   
3. // 默认为 node_module/.vite
   
4. const cacheDir = config.cacheDir
   
5.   ? path.resolve(resolvedRoot, config.cacheDir)
   
6.   : pkgPath && path.join(path.dirname(pkgPath), `node_modules/.vite`)

复制代码

紧接着处理用户配置的 assetsInclude，将其转换为一个过滤器函数：

1. const assetsFilter = config.assetsInclude
   
2.   ? createFilter(config.assetsInclude)
   
3.   : () => false

复制代码

然后，Vite 后面会将用户传入的 assetsInclude 和内置的规则合并：

1. assetsInclude(file: string) {
   
2.   return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file)
   
3. }

复制代码

这个配置决定是否让 Vite 将对应的后缀名视为静态资源文件（asset）来处理。

路径解析器

这里所说的路径解析器，是指调用插件容器进行路径解析的函数，代码结构如下所示:

1. const createResolver: ResolvedConfig['createResolver'] = (options) => {
   
2.   let aliasContainer: PluginContainer | undefined
   
3.   let resolverContainer: PluginContainer | undefined
   
4.   // 返回的函数可以理解为一个解析器
   
5.   return async (id, importer, aliasOnly, ssr) => {
   
6.     let container: PluginContainer
   
7.     if (aliasOnly) {
   
8.       container =
   
9.         aliasContainer ||
   
10.         // 新建 aliasContainer
    
11.     } else {
    
12.       container =
    
13.         resolverContainer ||
    
14.         // 新建 resolveContainer
    
15.     }
    
16.     return (await container.resolveId(id, importer, undefined, ssr))?.id
    
17.   }
    
18. }

复制代码

并且，这个解析器未来会在依赖预构建的时候用上，具体用法如下：

1. const resolve = config.createResolver()
   
2. // 调用以拿到 react 路径
   
3. rseolve('react', undefined, undefined, false)

复制代码

这里有 aliasContainer 和 resolverContainer 两个工具对象，它们都含有 resolveId 这个专门解析路径的方法，可以被 Vite 调用来获取解析结果，本质都是 PluginContainer。
接着，会顺便处理一个 public 目录，也就是 Vite 作为静态资源服务的目录：

1. const { publicDir } = config
   
2. const resolvedPublicDir =
   
3.   publicDir !== false && publicDir !== ''
   
4.     ? path.resolve(
   
5.         resolvedRoot,
   
6.         typeof publicDir === 'string' ? publicDir : 'public'
   
7.       )
   
8.     : ''

复制代码

至此，配置已经基本上解析完成，最后通过 resolved 对象来整理一下：

1. const resolved: ResolvedConfig = {
   
2.   ...config,
   
3.   configFile: configFile ? normalizePath(configFile) : undefined,
   
4.   configFileDependencies,
   
5.   inlineConfig,
   
6.   root: resolvedRoot,
   
7.   base: BASE_URL
   
8.   ... //其他配置
   
9. }

复制代码

生成插件流水线

生成插件流水线的代码如下：

1. ;(resolved.plugins as Plugin[]) = await resolvePlugins(
   
2.   resolved,
   
3.   prePlugins,
   
4.   normalPlugins,
   
5.   postPlugins
   
6. )
   
7. 
   
8. 
   
9. // call configResolved hooks
   
10. await Promise.all(userPlugins.map((p) => p.configResolved?.(resolved)))

复制代码

先生成完整插件列表传给 resolve.plugins，而后调用每个插件的  configResolved 钩子函数。其中 resolvePlugins 内部细节比较多，插件数量比较庞大，我们暂时不去深究具体实现，编译流水线这一小节再来详细介绍。
至此，所有核心配置都生成完毕。不过，后面 Vite 还会处理一些边界情况，在用户配置不合理的时候，给用户对应的提示。比如：用户直接使用 alias 时，Vite 会提示使用 resolve.alias。
最后，resolveConfig 函数会返回 resolved 对象，也就是最后的配置集合，那么配置解析服务到底也就结束了。
加载配置文件详解
首先，我们来看一下加载配置文件 (loadConfigFromFile) 的实现：

1. const loadResult = await loadConfigFromFile(/*省略传参*/)

复制代码

这里的逻辑稍微有点复杂，很难梳理清楚，所以我们不妨借助刚才梳理的配置解析流程，深入 loadConfigFromFile 的细节中，研究下 Vite 对于配置文件加载的实现思路。
接下来，我们来分析下需要处理的配置文件类型，根据文件后缀和模块格式可以分为下面这几类:

• TS + ESM 格式
  
• TS + CommonJS 格式
  
• JS + ESM 格式
  
• JS + CommonJS 格式
  

识别配置文件的类别

首先，Vite 会检查项目的 package.json 文件，如果有 type: "module" 则打上 isESM 的标识：

1. try {
   
2.   const pkg = lookupFile(configRoot, ['package.json'])
   
3.   if (pkg && JSON.parse(pkg).type === 'module') {
   
4.     isMjs = true
   
5.   }
   
6. } catch (e) {
   
7.   
   
8. }

复制代码

然后，Vite 会寻找配置文件路径，代码简化后如下：

1. let isTS = false
   
2. let isESM = false
   
3. let dependencies: string[] = []
   
4. // 如果命令行有指定配置文件路径
   
5. if (configFile) {
   
6.   resolvedPath = path.resolve(configFile)
   
7.   // 根据后缀判断是否为 ts 或者 esm，打上 flag
   
8.   isTS = configFile.endsWith('.ts')
   
9.   if (configFile.endsWith('.mjs')) {
   
10.       isESM = true
    
11.     }
    
12. } else {
    
13.   // 从项目根目录寻找配置文件路径，寻找顺序:
    
14.   // - vite.config.js
    
15.   // - vite.config.mjs
    
16.   // - vite.config.ts
    
17.   // - vite.config.cjs
    
18.   const jsconfigFile = path.resolve(configRoot, 'vite.config.js')
    
19.   if (fs.existsSync(jsconfigFile)) {
    
20.     resolvedPath = jsconfigFile
    
21.   }
    
22. 
    
23. 
    
24.   if (!resolvedPath) {
    
25.     const mjsconfigFile = path.resolve(configRoot, 'vite.config.mjs')
    
26.     if (fs.existsSync(mjsconfigFile)) {
    
27.       resolvedPath = mjsconfigFile
    
28.       isESM = true
    
29.     }
    
30.   }
    
31. 
    
32. 
    
33.   if (!resolvedPath) {
    
34.     const tsconfigFile = path.resolve(configRoot, 'vite.config.ts')
    
35.     if (fs.existsSync(tsconfigFile)) {
    
36.       resolvedPath = tsconfigFile
    
37.       isTS = true
    
38.     }
    
39.   }
    
40.   
    
41.   if (!resolvedPath) {
    
42.     const cjsConfigFile = path.resolve(configRoot, 'vite.config.cjs')
    
43.     if (fs.existsSync(cjsConfigFile)) {
    
44.       resolvedPath = cjsConfigFile
    
45.       isESM = false
    
46.     }
    
47.   }
    
48. }

复制代码

在寻找路径的同时， Vite 也会给当前配置文件打上 isESM 和 isTS 的标识，方便后续的解析。

根据类别解析配置


ESM 格式

对于 ESM 格式配置的处理代码如下：

1. let userConfig: UserConfigExport | undefined
   
2. 
   
3. 
   
4. if (isESM) {
   
5.   const fileUrl = require('url').pathToFileURL(resolvedPath)
   
6.   // 首先对代码进行打包
   
7.   const bundled = await bundleConfigFile(resolvedPath, true)
   
8.   dependencies = bundled.dependencies
   
9.   // TS + ESM
   
10.   if (isTS) {
    
11.     fs.writeFileSync(resolvedPath + '.js', bundled.code)
    
12.     userConfig = (await dynamicImport(`${fileUrl}.js?t=${Date.now()}`))
    
13.       .default
    
14.     fs.unlinkSync(resolvedPath + '.js')
    
15.     debug(`TS + native esm config loaded in ${getTime()}`, fileUrl)
    
16.   }
    
17.   //  JS + ESM
    
18.   else {
    
19.     userConfig = (await dynamicImport(`${fileUrl}?t=${Date.now()}`)).default
    
20.     debug(`native esm config loaded in ${getTime()}`, fileUrl)
    
21.   }
    
22. }

复制代码

可以看到，首先通过 Esbuild 将配置文件编译打包成 js 代码:

1. const bundled = await bundleConfigFile(resolvedPath, true)
   
2. // 记录依赖
   
3. dependencies = bundled.dependencies

复制代码

对于 TS 配置文件来说，Vite 会将编译后的 js 代码写入临时文件，通过 Node 原生 ESM Import 来读取这个临时的内容，以获取到配置内容，再直接删掉临时文件：

1. fs.writeFileSync(resolvedPath + '.js', bundled.code)
   
2. userConfig = (await dynamicImport(`${fileUrl}.js?t=${Date.now()}`)).default
   
3. fs.unlinkSync(resolvedPath + '.js')

复制代码

以上这种先编译配置文件，再将产物写入临时目录，最后加载临时目录产物的做法，也是 AOT (Ahead Of Time)编译技术的一种具体实现。
而对于 JS 配置文件来说，Vite 会直接通过 Node 原生 ESM Import 来读取，也是使用 dynamicImport 函数的逻辑，dynamicImport 的实现如下:

1. export const dynamicImport = new Function('file', 'return import(file)')

复制代码

你可能会问，为什么要用 new Function 包裹？这是为了避免打包工具处理这段代码，比如 Rollup 和 TSC，类似的手段还有 eval。你可能还会问，为什么 import 路径结果要加上时间戳 query？这其实是为了让 dev server 重启后仍然读取最新的配置，避免缓存。
CommonJS 格式
对于 CommonJS 格式的配置文件，Vite 集中进行了解析：

1. // 对于 js/ts 均生效
   
2. // 使用 esbuild 将配置文件编译成 commonjs 格式的 bundle 文件
   
3. const bundled = await bundleConfigFile(resolvedPath)
   
4. dependencies = bundled.dependencies
   
5. // 加载编译后的 bundle 代码
   
6. userConfig = await loadConfigFromBundledFile(resolvedPath, bundled.code)

复制代码

bundleConfigFile 函数的主要功能是通过 Esbuild 将配置文件打包，拿到打包后的 bundle 代码以及配置文件的依赖 (dependencies)。而接下来的事情就是考虑如何加载 bundle 代码了，这也是 loadConfigFromBundledFile 要做的事情。

1. async function loadConfigFromBundledFile(
   
2.   fileName: string,
   
3.   bundledCode: string
   
4. ): Promise<UserConfig> {
   
5.   const extension = path.extname(fileName)
   
6.   const defaultLoader = require.extensions[extension]!
   
7.   require.extensions[extension] = (module: NodeModule, filename: string) => {
   
8.     if (filename === fileName) {
   
9.       ;(module as NodeModuleWithCompile)._compile(bundledCode, filename)
   
10.     } else {
    
11.       defaultLoader(module, filename)
    
12.     }
    
13.   }
    
14.   // 清除 require 缓存
    
15.   delete require.cache[require.resolve(fileName)]
    
16.   const raw = require(fileName)
    
17.   const config = raw.__esModule ? raw.default : raw
    
18.   require.extensions[extension] = defaultLoader
    
19.   return config
    
20. }

复制代码

loadConfigFromBundledFile 大体完成的是通过拦截原生 require.extensions 的加载函数来实现对 bundle 后配置代码的加载，代码如下：

1. // 默认加载器
   
2. const defaultLoader = require.extensions[extension]!
   
3. // 拦截原生 require 对于`.js`或者`.ts`的加载
   
4. require.extensions[extension] = (module: NodeModule, filename: string) => {
   
5.   // 针对 vite 配置文件的加载特殊处理
   
6.   if (filename === fileName) {
   
7.     ;(module as NodeModuleWithCompile)._compile(bundledCode, filename)
   
8.   } else {
   
9.     defaultLoader(module, filename)
   
10.   }
    
11. }

复制代码

而原生 require 对于 js 文件的加载代码如下所示。

1. Module._extensions['.js'] = function (module, filename) {
   
2.   var content = fs.readFileSync(filename, 'utf8')
   
3.   module._compile(stripBOM(content), filename)
   
4. }

复制代码

事实上，Node.js 内部也是先读取文件内容，然后编译该模块。当代码中调用module._compile 相当于手动编译一个模块，该方法在 Node 内部的实现如下：

1. Module.prototype._compile = function (content, filename) {
   
2.   var self = this
   
3.   var args = [self.exports, require, self, filename, dirname]
   
4.   return compiledWrapper.apply(self.exports, args)
   
5. }

复制代码

在调用完 module._compile 编译完配置代码后，进行一次手动的 require，即可拿到配置对象：

1. const raw = require(fileName)
   
2. const config = raw.__esModule ? raw.default : raw
   
3. // 恢复原生的加载方法
   
4. require.extensions[extension] = defaultLoader
   
5. // 返回配置
   
6. return config

复制代码

这种运行时加载 TS 配置的方式，也叫做 JIT (即时编译)，这种方式和 AOT 最大的区别在于不会将内存中计算出来的 js 代码写入磁盘再加载，而是通过拦截 Node.js 原生 require.extension 方法实现即时加载。
至此，配置文件的内容已经读取完成，等后处理完成再返回即可：

1. // 处理是函数的情况
   
2. const config = await (typeof userConfig === 'function'
   
3.   ? userConfig(configEnv)
   
4.   : userConfig)
   
5. 
   
6. 
   
7. if (!isObject(config)) {
   
8.   throw new Error(`config must export or return an object.`)
   
9. }
   
10. // 接下来返回最终的配置信息
    
11. return {
    
12.   path: normalizePath(resolvedPath),
    
13.   config,
    
14.   // esbuild 打包过程中搜集的依赖
    
15.   dependencies
    
16. }

复制代码

总结

下面我们来总结一下 Vite 配置解析的整体流程和加载配置文件的方法：
首先，Vite 配置文件解析的逻辑由 resolveConfig 函数统一实现，其中经历了加载配置文件、解析用户插件、加载环境变量、创建路径解析器工厂和生成插件流水线这几个主要的流程。
其次，在加载配置文件的过程中，Vite 需要处理四种类型的配置文件，其中对于 ESM 和 CommonJS 两种格式的 TS 文件，分别采用了AOT和JIT两种编译技术实现了配置加载。
到此这篇关于一文弄懂Vite 配置文件的文章就介绍到这了,更多相关Vite 配置文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/326775cz1.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！