Vue.js & npm：是否所有依赖都应设为devDependencies？

嘿，这个问题在开发库/插件的时候确实很容易搞混，我来给你理清楚关键点：

首先得明确你的场景——你开发的是Vue.js插件组件，而非完整的业务应用，这时候依赖的处理逻辑和普通应用完全不同：

核心原则：避免重复打包与版本冲突 #

Webpack打包应用时会把所有依赖塞进最终文件，但插件是要被其他项目引入使用的，如果把axios这类通用依赖打包进去，会导致两个问题：

• 用户项目里如果已经有axios，就会出现两份不同版本的axios，可能引发兼容性问题
• 你的插件体积会无端变大，增加用户的打包负担

所以正确的做法是利用peerDependencies来声明依赖：

1. 用peerDependencies声明插件所需的依赖 #

在package.json里添加peerDependencies字段，告诉用户：我的插件需要你已经安装了指定版本的axios和Vue，这样插件会直接复用用户项目里已有的依赖，不会重复打包。

示例配置：

{
  "name": "your-vue-plugin",
  "version": "1.0.0",
  "peerDependencies": {
    "axios": "^0.21.0 || ^1.0.0",
    "vue": "^2.6.0 || ^3.0.0"
  },
  "devDependencies": {
    "axios": "^1.4.0",
    "vue": "^3.2.0",
    "vue-loader": "^17.0.0",
    "webpack": "^5.0.0"
    // 其他开发工具依赖...
  }
}

• devDependencies里放你本地开发调试时用的axios和Vue版本，只在开发阶段生效
• peerDependencies里声明的是插件对依赖的版本要求，用户安装你的插件时，npm会自动检查他们的项目是否满足这个要求，如果不满足会给出提示

2. 配置Webpack的externals排除依赖打包 #

为了确保Webpack不会把axios和Vue打包进你的插件代码，需要在webpack.config.js里添加externals配置，告诉Webpack这些依赖是外部提供的，不需要打包：

module.exports = {
  // ...其他webpack配置
  externals: {
    axios: 'axios',
    vue: 'Vue'
  }
}

特殊情况：可选依赖 #

如果你的插件只是可选性地使用axios（比如用户可以选择用其他请求库替代），那可以把axios放在optionalDependencies里，但这种场景比较少见，大部分强依赖axios的插件还是用peerDependencies更合理。

总结一下：开发Vue插件时，像axios这类通用第三方依赖，优先放在peerDependencies声明版本要求，配合Webpack的externals排除打包，devDependencies里放开发用的版本，这是社区公认的最佳实践～

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