前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解

最新推荐文章于 2024-05-28 16:22:32 发布

SteveRocket

最新推荐文章于 2024-05-28 16:22:32 发布

阅读量3.4k

点赞数 1

分类专栏： # Vue 文章标签： node.js vue.js npm

本文链接：https://blog.csdn.net/zhouruifu2015/article/details/133980100

版权

Vue 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

npm run dev/build/serve

npm install *

npm install * --save

npm install * --save-dev

npm install -g 全局安装

-g和--save-dev的区别和关系

--save和--save-dev命令的区别

总结

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

在Vue3/Node.js的开发过程中，我们经常会使用npm来安装和管理项目中的依赖包。在前面的几篇文章中我们已经介绍过了npm工具的详细使用方法和常用的一些操作指令，具体可以参考公众号CTO Plus这篇文章《前端开发技术栈（工具篇）：详细介绍npm、pnpm和cnpm分别是什么，使用方法以及之间有哪些关系》。

npm 是一个强大的包管理工具，它使开发人员能够轻松地安装、更新和管理项目依赖的包。通过初始化一个package.json 文件，你可以描述你的项目并记录其依赖关系。使用 npm install 命令，你可以安装和管理包。使用 npm publish 命令，你可以发布自己的包到 npm 注册表。无论是在开发过程中还是在分享你的包时，npm 都提供了丰富的功能和命令来满足你的需求。

原文：前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解

工具类推荐阅读：

《前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细）》
《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》
《前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细）》
《前端开发技术栈（工具篇）：详细介绍npm、pnpm和cnpm分别是什么，使用方法以及之间有哪些关系》
《前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解》
《前端开发技术栈（工具篇）：Vite在项目中的一些实践以及vite和webpack的区别，为什么选择Vite》
《Vite实战案例：构建快速、高效的现代前端项目》
《Vue进阶：得心应手的开发体验-基于Pycharm的Vue3项目构建与开发环境搭建》

其他更多关于Vue前端开发知识点、工具和技巧，请关注公众号CTO Plus后续的文章，有问题欢迎后台留言交流。

本篇将分享一些关于npm包管理器的开发技巧和注意事项。

npm概述

npm（Node Package Manager）是一个用于管理和分享JavaScript 包的工具。它是 Node.js 的默认包管理器，也是世界上最大的开源软件注册表。npm 提供了一系列命令和功能，使开发人员能够轻松地安装、更新和管理项目依赖的包。

常用的npm命令

npm提供了许多命令来帮助你管理和使用包。以下是一些常用的 npm 命令：

1. npm init - 初始化一个新的 npm 项目，并生成 package.json 文件。

2. npm install - 安装项目依赖的所有包。

3. npm install <package> - 安装指定的包。

4. npm install --save <package> - 安装指定的包，并将其添加到 dependencies 字段中。

5. npm install --save-dev <package> - 安装指定的包，并将其添加到 devDependencies 字段中。

6. npm uninstall <package> - 卸载指定的包。

7. npm update - 更新项目依赖的所有包。

8. npm update <package> - 更新指定的包。

9. npm outdated - 检查项目依赖的包是否有更新。

10. npm run <script> - 运行 package.json文件中定义的脚本。

11. npm publish - 发布一个包到 npm 注册表。

12. npm unpublish <package> - 从 npm 注册表中删除一个已发布的包。

13. npm search <keyword> - 搜索包。

14. npm info <package> - 查看指定包的详细信息。

15. npm ls - 列出项目依赖的所有包。

16. npm ls <package> - 列出指定包的依赖关系。

17. npm init - 初始化一个新的 npm 项目，并生成 package.json 文件。

18. npm install - 安装项目依赖的所有包。

19. npm install <package> - 安装指定的包。

20. npm install --save <package> - 安装指定的包，并将其添加到 dependencies 字段中。

21. 使用npm help <command>可查看某条命令的详细帮助，例如npm help install。

其他的一些使用技巧

22. 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。

23. 使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。

24. 使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。

25. 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。

26. 使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。

这里介绍的只是一小部分常用的 npm 命令，你可以通过运行 npm help 命令来查看 npm 的帮助文档， npm 还提供了许多其他命令和选项，可以根据你的需求进行使用。或者访问 npm 的官方网站（https://www.npmjs.com/或npmjs.org/doc/）获取更多信息。

除了本章介绍的部分外，NPM还提供了很多功能，package.json里也有很多其它有用的字段。除了可以在查看官方文档外，这里再详细介绍一些NPM常用命令。

npm是随同Nodejs一起安装的包管理工具，能解决Vue/Node.js代码开发和部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

下载三方包的方法

当我们需要使用三方包时，首先得知道有哪些包可用，以及对应包的名称是啥。我们可以在npmjs.org提供的搜索框中根据包名来搜索。知道了需要使用的包名后，比如这里的argv，就可以在工程目录下打开终端，使用以下命令来下载三方包。

npm install argv

下载好之后，argv包就放在了工程目录下的node_modules目录中，我们在代码中只需要通过require('argv')的方式引入即可使用，无需指定三方包路径。

关于require的使用和作用可以参考公众号CTO Plus的文章：《Node.js基础之require、exports、module构建模块的基本属性详细介绍》。

以上命令默认下载这个包的最新版，如果想根据指定版本下载包的话，可以在包名后边加上@<version>，例如通过以下命令可下载0.0.1版的argv。

npm install argv@0.1.1

另外，如果使用到的第三方包比较多，在终端下逐个进行安装第三方包的话不是很科学。因此npm对package.json的字段做了扩展，允许在其中声明第三方包依赖。我们可以在package.json文件中改写如下：

{    "name": "node-echo",    "main": "./lib/echo.js",    "dependencies": {        "argv": "0.0.2"    }}

接下来即可在工程目录下使用npm install命令进行批量安装第三方包。更重要的是，当以后node-echo也上传到了NPM服务器，别人下载这个包时，NPM会根据包中声明的第三方包依赖自动下载进一步依赖的三方包。例如，使用npm install node-echo命令时，NPM会自动创建以下目录结构。

- project/    - node_modules/        - node-echo/            - node_modules/                + argv/            ...    ...

这样，用户只需关心自己直接使用的三方包，不需要自己去解决所有包的依赖关系。

关于package.json文件的使用和作用，可以关注公众号CTO Plus，阅读《Vue3进阶（七）：package.json、package-lock.json、vue.config.js文件作用详解》这篇文章。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

依赖包版本号

使用NPM下载和发布代码时都会接触到版本号。在NPM（Node Package Manager）中，每个依赖包都有一个版本号，用来标识该包的不同版本。

NPM使用语义化版本号（Semantic Versioning）规范来定义版本号，格式为"MAJOR.MINOR.PATCH"。

MAJOR：主版本号，表示不兼容的API变化。
MINOR：次版本号，表示向后兼容的功能性新增。
PATCH：补丁版本号，表示向后兼容的问题修复。

另外，版本号还可以包含预发布版本和构建元数据，如"1.0.0-beta.1+build123".

在package.json文件中，可以使用不同的符号来定义依赖包的版本范围：

确切版本号：使用"="符号，如"1.0.0"，表示要求精确匹配该版本。
指定范围：使用比较符号，如">1.0.0"，表示要求大于指定版本。
波浪号：使用"~"符号，如"~1.0.0"，表示要求兼容的最新补丁版本。
插入号：使用"^"符号，如"^1.0.0"，表示要求兼容的最新次版本。
范围：使用"-"符号，如">=1.0.0 <2.0.0"，表示要求在指定范围内的版本。

通过定义版本号和范围，可以确保项目在安装依赖包时获取到符合要求的版本，同时兼顾向后兼容性和稳定性。

版本号有了这个保证后，在声明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。NPM支持的所有版本号范围指定方式可以查看官方文档。

npm run命令报错

npm run dev报错引发的思考

当我们创建好 vue 项目后，直接执行vue run dev 报错，而运行vue run serve 就可以启动，如下：

npm run dev

npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:

npm ERR!

我们可以看package.json中的scripts有没有配置dev命令，如果没有，则控制台就会报missing script: dev的错误。要弄明白这个问题，我们看下面的解释。

npm run dev/build/serve

首先了解一个文件：package.json。package.json是NPM项目的配置文件，其中的"scripts"字段用于定义一些脚本命令。脚本命令可以通过NPM运行，用于执行一些任务或操作，如启动应用程序、运行测试、构建项目等。

通过在package.json中定义脚本命令，可以实现以下功能：

方便地运行常用的开发任务，如启动开发服务器、编译代码等。
统一项目中的脚本命令，便于团队协作和部署。
可以定义前置和后置命令，实现复杂的任务流程。
可以使用NPM提供的一些内置命令，如"npm run test"用于运行测试。

其实npm run dev或者是npm run serve等指令，npm run *并不是一定要这么写。npm run *是执行配置在package.json中的脚本，在package.json的"scripts"字段中，可以定义多个脚本命令，如：

"scripts": {"serve": "vue-cli-service serve","start": "node server.js","test": "jest","build-wb": "webpack""build": "vue-cli-service build","lint": "vue-cli-service lint"},

npm run * 中的 * 可以理解为键值对的key，实际上 run 的是在package.json 里面 scripts 配置的value。比如，npm run serve 实际运行的是：vue-cli-service serve。

npm run *的运行必须只有在package.json scripts 配置了，你才能run指定的命令，所以并不是所有的项目都能 npm run dev/build。要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。

通过运行"npm run <script-name>"命令，可以执行对应的脚本命令，如"npm run start"将执行"node server.js"命令。

而放在 3.0 以前运行的则是：node build/dev-server.js文件；

这里就像是一些命令的快捷方式，免去每次都要输入很长的命令(比如 serve 那行)，一般项目都会有build、dev、unit 等，所以命名最起码要从名字上基本能看出来是干什么的（见名知意）。

关于package.json文件的更多使用方法和作用，可以关注公众号CTO Plus《Vue3进阶（七）：package.json、package-lock.json、vue.config.js文件作用详解》的这篇文章。

在使用npm的过程中，我们会经经常使用到`npm install`、`npm install --save`、`npm install --save-dev`和`npm install -g`命令，接下来将详细介绍这些命令的作用、区别和关系

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

npm install *

`npm install`命令是最常见的安装依赖包的方式。当我们执行`npm install package-name`时，npm会自动下载并安装指定的依赖包。这些安装的依赖包会被保存在项目的`node_modules`目录中。
`npm install`命令还有一个功能是，如果当前目录下存在一个`package.json`文件，那么npm会自动将安装的依赖包加入到`package.json`文件的`dependencies`字段中。
将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
可以通过 require() 来引入本地安装包。

**npm install * --save**

这个命令的作用是告诉npm这个依赖包是我们项目的正常运行所必需的。在项目发布时，依赖包的安装和版本信息会被自动读取，确保项目在其他环境中的正确运行。

`npm install --save`命令是在安装依赖包的同时，将依赖包的信息保存到`package.json`文件的`dependencies`字段中，同时会把*包安装到node_modules目录中；

之后再运行npm install命令时，会自动安装*到node_modules目录中；

如果运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装*到node_modules目录中。

**npm install * --save-dev**

使用`--save-dev`可以让我们更方便地区分正式运行所需的依赖包和开发过程所需的依赖包，减小项目发布时的体积。

通过这个命令安装的依赖包会被保存在项目的`node_modules`目录中，并且它们的信息会被添加到项目的`package.json`文件中的`devDependencies`字段中。

之后再运行npm install命令时，会自动安装*到node_modules目录中；

如果之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装*到node_modules目录中；

`npm install --save-dev`命令类似于`npm install --save`，但是将依赖包的信息保存到`package.json`文件的`devDependencies`字段中。

`npm install --save-dev`命令用于在项目中安装开发环境所需的依赖包。这些依赖包通常是项目开发过程中需要用到的工具、测试框架、模拟数据等。也就是`devDependencies`字段中的依赖包只在开发过程中使用，而在项目部署或发布时并不需要。比如，一些测试框架如`jest`，代码检查工具如`eslint`等都可以作为开发依赖包来安装。

使用原则：运行时需要用到的包使用--save，否则使用--save-dev。

注意：

npm install -d 就是 npm install --save-dev 安装到开发环境，例如 gulp ，babel，webpack 一般都是辅助工具。

npm insatll -s 就是npm install --save，安装到生产环境，如vue、react等。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

npm install -g 全局安装

`npm install -g`命令用于全局安装npm包。通常，npm包可以作为全局命令行工具使用，比如`vue-cli`、`create-react-app`等。这些工具在命令行中可以直接调用，而不需要在每个项目中都单独安装。

全局安装的npm包会被安装到全局的`node_modules`目录中（或者放在 /usr/local 下或者 node 的安装目录）。一般情况下，该目录位于操作系统的全局环境变量所指定的路径下，可以通过`npm root -g`命令查看全局`node_modules`的路径。

需要注意的是，全局安装的npm包并不会自动添加到项目`package.json`文件中，因为它们不是项目的直接依赖。

-g和--save-dev的区别和关系

`npm install -g`和`npm install --save-dev`的区别在于它们安装的依赖包的作用范围和持久性。

`npm install -g`安装的包是全局的，它们可以在命令行中直接调用，不需要在每个项目中都安装。这些包通常是命令行工具或一些全局共享的库。

`npm install --save-dev`安装的包是项目的开发依赖包，它们只在项目的开发过程中使用。这些包通常是一些在代码开发、测试和调试中需要用到的工具和库。

这两个命令的关系是可以共存的。我们可以在项目中既安装全局包，又安装开发依赖包。全局包可以提供一些全局的便利工具，而开发依赖包则提供了项目开发过程所需的必要工具。

--save和--save-dev命令的区别

`npm install`：仅安装依赖包，不会将安装的依赖包信息保存到`package.json`文件中。
`npm install --save`：安装依赖包，并将依赖包信息保存到`package.json`文件的`dependencies`字段中。
`npm install --save-dev`：安装依赖包，并将依赖包信息保存到`package.json`文件的`devDependencies`字段中。

使用`--save`和`--save-dev`的好处是，当我们共享项目代码或传递给其他开发者时，他们只需要执行`npm install`，就可以自动安装项目所需的全部依赖包。

总结

在Vue3开发中，使用npm管理依赖包是非常重要的。本文详细介绍了`npm install`、`npm install --save`和`npm install --save-dev`这三个命令的作用和区别。合理使用这些命令能够更好地管理和维护项目中的依赖包，提高开发效率和项目的可维护性。希望本文对你学习和使用Vue3有所帮助。

希望本文能够帮助你更好地理解和使用npm这个包管理工具，并在Vue3的学习和实践中取得更好的效果。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。