如何搭建项目实现npm包开发生产切换无需修改导入路径

你只需要统一所有导入语句为npm包的写法 import Button from '@my_name/UIComponents'，再通过以下任意一种方案适配开发环境即可，无需修改业务代码：

方案1：配置构建工具路径别名 #

开发环境下将包名映射到本地子项目目录，生产环境自动走node_modules的正式包，不需要额外操作。

• 如果用Vite，修改vite.config.js：

import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => ({
  resolve: {
    alias: mode === 'development' ? {
      '@my_name/UIComponents': '/UIComponents' // 填本地子项目相对根目录的实际路径
    } : {}
  }
}))

• 如果用Webpack，修改webpack.config.js：

const path = require('path')
module.exports = (env) => ({
  resolve: {
    alias: env.development ? {
      '@my_name/UIComponents': path.resolve(__dirname, './UIComponents')
    } : {}
  }
})

• 如果使用TypeScript，还需要在tsconfig.json中补充路径声明，避免IDE类型报错：

{
  "compilerOptions": {
    "paths": {
      "@my_name/UIComponents": ["./UIComponents"]
    }
  }
}

方案2：使用npm软链接（link） #

直接把本地子项目链接到node_modules对应位置，完全模拟npm包的结构，不需要改构建配置：

1. 先进入本地UIComponents目录，执行npm link，将本地包注册到全局
2. 回到MyApp根项目目录，执行npm link @my_name/UIComponents，把全局注册的本地包链接到当前项目的node_modules下
3. 开发结束要切换正式npm包时，执行npm unlink @my_name/UIComponents后重新安装正式包即可

方案3：配置包管理工具的Workspace（适合长期维护的场景） #

如果两个项目长期并行开发，可以开启pnpm/yarn/npm的workspace能力，自动处理本地依赖关联：

1. 在MyApp根目录新建pnpm-workspace.yaml（以pnpm为例）：

packages:
  - 'UIComponents'

2. 在根项目的package.json依赖中写入："@my_name/UIComponents": "workspace:*"
3. 执行安装命令后，开发阶段会自动使用本地UIComponents的代码，发布根项目时包管理工具会自动把workspace标识替换为对应版本的正式npm包依赖。

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