如何正确使用dependencies

开发项目时候,我们需要安装各种依赖项(dependencies),这体现在package.json中就是:

json 复制代码
{
  "name": "bubucuo",
  "dependencies": {
    "package-a": "^1.0.0"
  },
  "devDependencies": {
    "package-b": "^1.0.0"
  },
  "peerDependencies": {
    "package-c": "^1.0.0"
  },
  "optionalDependencies": {
    "package-d": "^1.0.0"
  }
}

问题来了,怎么这么多dependencies,该如何使用呢?接下来我们分别来区分一下:

dependencies

dependencies是常见的依赖选项,这里是指代码运行的时候需要的依赖,也是开发和生产环境都需要的依赖,比如React、Vue等就是这样的依赖。

当我们执行 npm install x 或者yarn add x或者pnpm install x的时候,安装的就是这个依赖~

后文安装依赖的命令使用pnpm来举例子~

devDependencies

devDependencies是指开发环境下需要的依赖,这样的依赖在代码运行的时候并不需要,比如babel等。

peerDependencies

peerDependencies是一种特别的依赖,这种依赖只有在发布包的时候才会用到。

换句话说,如果用户想要安装x,但是用户使用x的时候又必须使用y,那么x的package.json里的peerDependencies就要包括y。

比如用户使用react-dom的时候就依赖react,因此react-dom的源码包里的package.json里就长这样:

peerDependenciesMeta

辅助peerDependencies设置,比如下面的代码,就可以设置当soy-milk依赖为可选,即安装失败也不会提示warning。

json 复制代码
{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x",
    "soy-milk": "1.2"
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  }
}

optionalDependencies

optionalDependencies是指可选的依赖。可选的依赖如果安装失败,并不会提示错误信息或者妨碍依赖安装进度。

举个实用场景的例子,有些依赖并不需要运行在每个机器上,并且这种依赖安装失败也有其它的兼容方案,那么这个时候就可以使用optionalDependencies。比如Watchman。

bundledDependencies or bundleDependencies

这两个写法均有效。

bundledDependencies可以定义一个元素是包名的数组,当发布包的时候,这些包会被打包到一起。

json 复制代码
{ 
    "name": "awesome-web-framework",
    "version": "1.0.0", 
    "bundleDependencies": [ 
        "renderized", "super-streams" 
    ]
}

另外, bundleDependencies 也能被设置成布尔值,当设置为true的时候,所有依赖都会被打包到一起。反之为false的时候,则不会打包任何包。

参考:docs.npmjs.com/cli/v9/conf...

相关推荐
蜡台几秒前
vue文件template ,script, style 多文件写法小记
前端·javascript·vue.js
小江的记录本18 分钟前
【HTTP】HTTP请求方法与状态码(全体系知识总结+附表格)
前端·网络·后端·网络协议·http·状态模式·web
leafyyuki30 分钟前
前端 SSE 流式请求实战:打造流畅的 AI 流式应答体验
前端·人工智能·markdown
幸福指北38 分钟前
我用 Tauri + Vue 3 + Rust 开发了一款跨平台网络连接监控工具Portview,性能炸裂!
前端·网络·vue.js·tcp/ip·rust
炁场悟道39 分钟前
基于vue3的极简登录架构设计
前端
光影少年42 分钟前
Webpack的核心概念?常见优化手段?
前端·webpack·掘金·金石计划
han_43 分钟前
前端性能优化之白屏、卡顿指标和网络环境采集篇
前端·javascript·性能优化
Flyfreelylss1 小时前
DOM 注入实践:在 React 中优雅地扩展第三方组件
前端·react.js
北城笑笑1 小时前
Vue 100 ,Metaspace memory lack Error( 元空间内存不足 )
java·前端·javascript·vue
谏书稀1 小时前
vue项目(pnpm)迁移到无网环境开发
前端·javascript·vue.js