怎么知道依赖包需要安装到生产还是开发环境或者是安装到全局

刚开始接触 Node.js (包管理项目) 的时候很多人都会疑惑哪些依赖是可以装在全局的,哪些依赖是安装在项目里的,安装在项目里的依赖又是怎么分辨是否是要安装在开发环境中还是生产环境中?

小白的时候还不知道怎么搜索关键词,然后就只能看着文档,他们怎么说自己就怎么敲,

上边写的是 npm install vuenpm install,
如果写的是 npm install -g @vue/cli 那么就 npm install -g,
如果是 npm install --save-dev @babel/core 那么就 npm install --save-dev

比如 4 个月前的我就是这样,最近有一些人在群里问,那我就整理了下(原来这不是我笨理解不了,别人也是这样觉得的!)

其实很简单

先了解下什么是 开发环境生产环境:

  • 开发环境:项目尚且在编码阶段,为了开发调试方便,配置可以比较随意,一般打开全部错误报告。
  • 生产环境: 是指正式提供对外服务了,一般会关掉错误报告,打开错误日志。比如开发企业网站,开发完成之后放在阿里云的服务器上了交付给客户了的时候。

PS: 其实还有一个测试环境,但是现在用不着,就不说了。

怎么分辨依赖安装在开发环境中还是生产环境中?

  • 如果是你编辑代码的时候用到的辅助工具依赖就安装到 devDependencies 下,也就是 npm install 包名 --save-dev(注意 –save-dev 中间没有空格哦)

    • 例如一些 CSS 预处理器:Less,Sass,Stylus,他们会在你打包项目的时候编译成为正常的 CSS 文件。
    • ESlint 这样的语法规则检查工具,帮助你检查你语法是否规范,代码风格是否良好,然后提示你需要修改或者直接把代码格式化成未预设的规范格式。
    • Webpack 这样的打包工具等等

这些帮助你快速开发的工具类依赖包,它们在开发完成之后是不需要存在你项目里边的,所以是安装在开发环境中,在项目打包时就可以忽略这些依赖来达到压缩项目大小的目的。

  • 如果是你项目运行需要的依赖,就安装到 dependencies 下 就是npm install 包名 --save
    • 例如 React、Angular、Vue.js 这样的前端框架
    • axios 这样的 http 请求库
    • 或者 BootStrap,ElemntUI 这样的 UI 组件库
    • 多了去了不写了

这些必须一直存在在项目里边的依赖包,你的项目运行就依靠这些依赖运行,如果缺少项目就会功能缺失|报错或者直接运行不起来。

比如你的项目是基于 Vue.js 的,那么你的项目运行时 Vue.js 就是必须的,如果缺少了 Vue 项目就运行不起来展示成空白页,所以时安装在生产环境中。

那哪些依赖可以安装在全局呢?

像一些快速开发完整系统的项目脚手架。例如: Vue.js 的 Vue CLI,Hexo 的 hexo-cli;对标 npm 的包管理工具 yarn 和一些服务型工具依赖,比如 http-server,npm-check-updates 之类。

不需要在项目里就可能会使用的工具依赖,或者你想写静态 html 文件的时也可以使用 CSS 预处理器那么也可以把它安装在全局(但是如果是基于包管理的项目还是安装在开发环境)

什么?你问 npm 和 yarn 的区别用哪个好??

等下次我什么时候想起来吧,挖个坑先,

简单说下现在 npm 和 yarn 已经没有什么区别了只是命令行的差异 yarn 的某些命令行会精简一些,和安装依赖的时候是不是并行下载的区别了,另外 npm 有一个叫做 npx 的臭弟弟可是很厉害的。