如何为同一devDependency配置不同版本以区分开发与生产构建？

你可以通过以下几种方式实现同一devDependency在不同构建环境下使用不同版本，且不产生冲突：

1. 依赖别名 + 构建工具环境分支解析 #

直接在package.json中为两个版本的依赖设置别名，通过构建工具（如Webpack/Vite）根据环境变量切换实际引入的包：

首先在package.json中添加带别名的依赖：

"devDependencies": {
  "common-components-dev": "npm:common_components@d.1.0.0",
  "common-components-prod": "npm:common_components@m.1.0.0"
}

然后在构建工具配置中，根据环境变量设置模块别名：

Webpack 示例 #

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  resolve: {
    alias: {
      'common_components': isDev ? 'common-components-dev' : 'common-components-prod'
    }
  }
};

Vite 示例 #

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const isDev = mode === 'development';
  return {
    resolve: {
      alias: {
        'common_components': isDev ? 'common-components-dev' : 'common-components-prod'
      }
    }
  };
});

之后代码中依然正常引入import { xxx } from 'common_components'，构建工具会自动根据环境切换到对应版本。

2. 构建前动态安装指定版本 #

利用npm/yarn的脚本钩子，在执行构建命令前临时安装对应版本的依赖（不修改package.json）：

修改package.json的scripts字段：

"scripts": {
  "prebuild:dev": "npm install common_components@d.1.0.0 --no-save --save-dev",
  "build:dev": "your-dev-build-command",
  "prebuild:prod": "npm install common_components@m.1.0.0 --no-save --save-dev",
  "build:prod": "your-prod-build-command"
}

• --no-save 确保不会修改package.json中的依赖版本配置
• pre 前缀是npm的钩子脚本，会自动在对应的build命令前执行

执行npm run build:dev时，会先安装d版本的依赖再构建；执行npm run build:prod则会先安装m版本再构建。

3. 使用package.json的条件依赖（Node.js 16.10+支持） #

如果你的项目使用Node.js 16.10及以上版本，可以利用npm的条件依赖功能，直接在package.json中为不同环境指定版本：

"devDependencies": {
  "common_components": {
    "development": "d.1.0.0",
    "production": "m.1.0.0"
  }
}

安装时通过npm install --include=dev（默认）会根据当前NODE_ENV自动安装对应版本，不过需要注意这种方式对部分旧工具可能存在兼容性问题。

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