如何在 monorepo 中共享 Vite 配置？

Question

我正在尝试使用 Turborepo 制作 monorepo。我在那里有很多 Vue 项目，我需要在所有应用程序之间共享 Vite 配置。以下是我试图实现这一目标的方法。

我有一个名为@monorepo/configs：

packages/
  configs/
    package.json
    index.ts
    vite.config.base.ts

包.json：

{
  "name": "@monorepo/configs",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "main": "index.ts",
  "types": "index.ts",
  "files": [
    "./src/tsconfig.base.json",
    "./src/vite.config.base.js"
  ]
}

vite.config.base.ts：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

// regular config
export const ViteConfigBase = defineConfig({
  resolve: {
    alias: {
      // some aliases
    }
  }
})

索引.ts:

export { ViteConfigBase } from './vite.config.base' 

在另一个应用程序的 vite.config.ts 中：

import { fileURLToPath, URL } from 'node:url'

import { ViteConfigBase } from '@monorepo/configs/src/vite.config.base' // notice import from 'src'

import { defineConfig, mergeConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(mergeConfig(
  ViteConfigBase,
  {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
))

在这里，我从“src”文件夹将 ViteConfigBase 作为文件导入，这是我收到的错误npm run dev：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\src\vite.config.base.js from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts not supported.
Instead change the require of vite.config.base.js in C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts to a dynamic import() which is available in all CommonJS modules.

如果我将从“src”文件夹导入更改为从索引导入，如下所示：

import { fileURLToPath, URL } from 'node:url'

import { ViteConfigBase } from '@monorepo/configs' // <-- here

import { defineConfig, mergeConfig } from 'vite'

// other config...

那么错误将会是这样的：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts:1
export { ViteConfigBase } from './src/vite.config.base' 
^^^^^^

SyntaxError: Unexpected token 'export'

哦好吧，我以前见过。让我们尝试一下 package.json 中的 "type": "module" 。现在这就是错误：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts

这就是我被困住的地方。我肯定需要这些文件为 .ts（并且我不确定如果我将扩展名更改为 .js，它们是否会起作用）。

我也可以通过添加构建步骤轻松解决此问题，但我认为没有必要，应该有解决办法。构建步骤将为开发过程和代码本身增加大量开销。我已经尝试过了，dist文件夹无缘无故大约有 4Mb 左右。另外，在这种情况下，我将无法使用“转到定义”功能，最后但并非最不重要的一点是，每次更改后都必须重新构建它，所以我真的希望避免这一步，只在各处使用原始配置文件。

Answer 1

如果你使用 Turborepo，这样怎么样？

\n

/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 apps\n|  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app1\n|  |  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|  |  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n|  |  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n|  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app2\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n|     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 packages\n|  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 viconfig\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n|     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 apps\n|  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app1\n|  |  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|  |  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n|  |  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n|  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app2\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n|     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 packages\n|  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 viconfig\n|     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n|     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

// apps/app1/package.json\n\n{\n  "name": "app1",\n  "devDependencies": {\n    "viconfig": "workspace:*",\n    "vite": "4.0.0"\n  }\n}\n

\n

// apps/app1/vite.config.ts\n\nimport { defineConfig } from "vite";\nimport customConfig from "viconfig";\n\nexport default defineConfig(() => {\n  return {\n    ...customConfig,\n  };\n});\n

\n

// packages/viconfig/index.js\n\nimport path from "node:path";\n\nexport default {\n  resolve: {\n    alias: {\n      "@": path.resolve(process.cwd(), "src"),\n    },\n  },\n};\n

\n