NPM Workspace+Vite项目：如何移除导入路径中的dist前缀？

方案一：使用package.json的exports字段（推荐） #

在core包的package.json中添加exports字段——这是Node.js标准的模块导出映射，Vite/Rollup会优先读取该配置解析导入路径，配合已有的typesVersions可同时保证类型和模块解析正常：

{
  "name": "@my-project/core",
  // 保留原有字段...
  "typesVersions": {
    "*": {
      "*": ["./dist/*"]
    }
  },
  "exports": {
    "./plugins/*": {
      "types": "./dist/plugins/*.d.ts",
      "import": "./dist/plugins/*.js",
      "require": "./dist/plugins/*.cjs"
    }
    // 若有其他需要映射的目录（如utils），可按同样格式添加
  }
}

如果你的编译产物只有ES模块（均为.js），可简化配置：

"exports": {
  "./plugins/*": "./dist/plugins/*.js"
}

该配置会告知Vite：当导入@my-project/core/plugins/Input时，实际读取core/dist/plugins/Input.js文件，同时typesVersions确保TypeScript能找到对应类型文件。

方案二：配置Vite的resolve.alias #

若不想修改core包配置，可在examples项目的vite.config.js中添加路径别名，手动映射导入路径到dist目录：

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

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        include: '**/*.{jsx,tsx}',
      }),
    ],
    resolve: {
      alias: [
        {
          // 正则匹配所有@my-project/core开头的导入路径
          find: /^@my-project\/core\/(.*)$/,
          // 替换为core/dist下对应的编译文件，自动补全.js后缀
          replacement: path.resolve(__dirname, '../core/dist/$1.js')
        }
      ]
    },
    server: {
      port: 3000,
      host: true,
    },
    preview: {
      port: 4000,
    },
  };
});

注意事项 #

• 确保core包已完成编译，dist目录下存在对应的plugins/Input.js和Input.d.ts文件；
• 方案一符合现代模块规范，可同时兼容Vite、TypeScript及Node.js环境，优先推荐；
• 两种方案任选其一即可，无需重复配置。

内容的提问来源于stack exchange，提问作者IanelGreenleaf