如何在 monorepo 中共享 Vite 配置？

Question

如何在 monorepo 中共享 Vite 配置？

4

我正在尝试使用Turborepo创建monorepo。我有很多Vue项目，需要在所有应用程序之间共享Vite配置。以下是我尝试实现此目标的方法。

我有一个名为@monorepo/configs的包：

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

package.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
    }
  }
})

index.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' 文件夹导入更改为从 index 导入，就像这样：

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。此外，在这种情况下，我将无法使用“转到定义”功能，最后但并非最不重要的是，每次更改后都必须重新构建，因此我真的希望避免这一步骤并在所有地方使用原始配置文件。

- Andrew

嗨安德鲁，你解决了这个问题吗？对我来说，唯一有效的方法是将文件更改为.js。当我将它作为.ts文件从根目录通过相对导入../../vite.config.base.ts导入时，它才能正常工作。但是当我将它移动到一个包中时，它总是显示一些错误，就像你遇到的一样。 - undefined

@RonaldRuzicka 你好！我刚刚放弃了使用.ts，改成了.js，现在一切都正常工作了。但是对于你的情况，我真的不太确定如何帮助你 :( - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Crows · Accepted Answer

如果您正在使用 TurboRepo，可以考虑以下方式：

/
├── apps
|  ├── app1
|  |  ├── src
|  |  ├── package.json
|  |  └── vite.config.ts
|  └── app2
|     ├── src
|     ├── package.json
|     └── vite.config.ts
├── packages
|  └── viconfig
|     ├── index.js
|     └── package.json

// apps/app1/package.json

{
  "name": "app1",
  "devDependencies": {
    "viconfig": "workspace:*",
    "vite": "4.0.0"
  }
}

// apps/app1/vite.config.ts

import { defineConfig } from "vite";
import customConfig from "viconfig";

export default defineConfig(() => {
  return {
    ...customConfig,
  };
});

// packages/viconfig/index.js

import path from "node:path";

export default {
  resolve: {
    alias: {
      "@": path.resolve(process.cwd(), "src"),
    },
  },
};

// packages/viconfig/package.json

{
  "name": "viconfig",
  "main": "index.js",
  "type": "module",
  "types": "index.js"
}