关于前端:为什么vueconfigjs中使用require而viteconfigjs使用-import

偶尔一次发现，他们两个的引入模块的形式不一样，在好奇心的驱使下，便开始一探到底。

1、vue.config 形式

关上我的项目的 package.json，找到 scripts 地位。

找到 vue-cli-service 命令，通常命令都位于以后我的项目的 node_modules 下的 .bin 文件夹中 (全局命令不在此处)

在 node_modules 下找到 @vue/cli-service/bin/vue-cli-service.js

最重要是红色框内语句。持续往下找。

service.js 文件比拟长，重要的是上面这句。

关上 loadFileConfig

这个文件很短，只有 38 行，却十分重要。

粗心是首先去找是否有自定义配置文件门路，如果有，就加载自定义配置文件；
如果没有，就用默认的 vue.config.xx。

找到配置文件后，通过 is-file-esm 模块来判断配置文件是用 es 模块形式，还是 commonjs 模块形式加载。

而 is-file-esm 判断没有别的。就是通过 nodejs 官网定义的文件 拓展名 和 package.json 中的 type 去判断。这里感兴趣，能够浏览 nodejs 官网对于 commonjs 和 esm 的反对和定义。

is-file-esm 模块会先通过文件扩展名判断，

.mjs 为 esm , 
.js, .cjs 为 commonjs 模块，如果没有扩展名，则通过判断 package.json 的 type 判断
"type":"module",   为 esm，"type":"commonjs",   为 esm，如果扩展名和 type 同时呈现，则扩展名优先级高。

所以，如果 type 没指定，vue.config.js 以 js 结尾，那么加载的就是 commmonjs，vue.config.js 是以 commonjs 形式启动，模块引入只能用 require，而不是 import，如果改成 import，就会报错.

咱们能够将扩展名换成 .mjs 试试 (同样能够在 package.json 中指定 type，咱们只是挑一种，你有趣味，能够去试试)

启动后，发现 import 失常辨认，然而 require 没有被定义。阐明 vue.config.mjs 是以 es 模块的形式启动的。

2、vite.config 形式

关上我的项目的 package.json，找到 scripts 地位。

同样，找到 node_module 下的 .bin 目录

找到 vite 模块下的 bin.vite.js

再找到 dist/node/cli

在 cli.js 这个文件中，找到 /chunks/dep-c9998dc6.js（名称可能版本不同会变，但必定是位于 createServer 地位处）

在 dep-c9998dc6.js 文件中，找到 loadConfigFromFile 办法。

能够发现，这里的 isESM 变量，并不是通过模块去判断，而是间接在代码中通过 package.json 的 type 或者 vite.config.xx 的扩展名判断的。只不过多了个额定的 ts, 如果扩展名是 ts，则也是 es 模块。

如果配置文件是 vite.config.js。那么 isESM 为 false，userConfig 为 undefined，之后执行 bundleConfigFile 办法将 es 模块转译为 commonjs 模块 (看正文)

// Bundle config file and transpile it to cjs using esbuild.
const bundled = await bundleConfigFile(resolvedPath);

这就是为什么，vite.config.js 即便不是 es 模块，也能够在外面应用 import 的起因。因为被转译了。

当然批改 vite.config.js 为 vite.config.mjs 也是能够的。

最终后果和 vue.config.js 大同小异，都是先判断模块类型后，再通过不同的加载器，将其加载进来。