带有 Vite 的 NPM 工作区项目消除了 Vite 构建中对 dist 文件夹的需要

Question

我有一个项目，其模块使用完整路径导出而不是索引文件。

该项目由 2 个 NPM 工作区组成。一个是

core

，另一个是

examples

。

我试图避免的问题是导入路径看起来像

@my-project/core/dist/plugins/Input

我面临的问题是，我设法让 Typscript 构建输出，这样 TypeScript 就可以编译，而无需在路径中包含

dist

，但是 Vite 不会构建，因为它声称找不到合适的代码。

Error: [vite]: Rollup failed to resolve import "@my-project/core/plugins/Input"

Typescript 很好，这是一个挑战，但似乎可以通过将以下内容添加到我的 package.json 来解决

"typesVersions": {
    "*": {
      "*": [
        "./dist/*"
      ]
    }
  },

我认为这是我的 Vite 配置所特有的，如下所示：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        // Use React plugin in all *.jsx and *.tsx files
        include: '**/*.{jsx,tsx}',
      }),
    ],
    server: {
      port: 3000,
      host: true,
    },
    preview: {
      port: 4000,
    },
  };
});

我一直在尝试很多不同的方法来让自己发疯，现在通过编译 TypeScript，我已经成功了一半。我希望有人能指出我在让 Vite 正常工作时所犯的简单错误。

Answer 1

尝试在要导入的包的 package.json 中设置导出路径。像这样的东西：

{
  "name": "@my-project/core",
  ...
  "exports": {
    ".": "./dist/index.js",
    "./plugins/Input": "./dist/plugins/Input",
  }
}

然后您应该能够导入子文件夹，如下所示

import { stuff } from '@my-project/core/plugins/Input'

值得注意的是，如果此包供公共使用，那么您可能需要添加 ESM 和 CJS 导出路径来构建两组输出：

        ".": {
            "import": "./dist/index.js",
            "require": "./dist/cjs/index.cjs"
        },

让我知道你过得怎么样！