文章目录
为什么要使用npm? 它能为我们带来什么？
随着越来越多新技术的涌现，当我们项目中需要引用js库或框架的时候，打开一个个官网下载文件放进项目中需要耗费很大的时候和精力，效率十分低下。无论是开发vue，react还是小程序，现在都能通过 npm来进行库和框架的引用和管理，极大的提高开发效率和减少出错的风险。
什么是npm？
NPM 是 Node.js 包管理器，用来安装各种 Node.js 的扩展。现在它的能力是 javascript 包管理，因为不是只能在node.js项目上使用，几乎所有现代前端开发项目都可以使用，通过它我们可以在项目中管理引用已有的依赖包，也就是其他开发人员共享的代码。
怎么使用npm？
1. 安装和测试是否成功
通常情况下，我们都是通过安装node.js 就同步安装了 npm，检测方法就是在终端输入：
$ npm -v
# 输出
8.19.2
如果有输出版本号，则说明你电脑上已经完成了npm的安装。
否则如果输出了 command not found: npm，再次输入以下命令查看是否已经安装node.js：
$ node -v
# 输出
v18.12.0
如果没有输出版本号，请先自行安装 node.js。
2. 切换镜像源
因为网络原因，我们访问默认npm源的速度很慢，所以切换到国内 taobao源。
更改配置命令
$ npm config set registry=https://registry.npm.taobao.org/
查看当前源
$ npm config get registry
# 输出
https://registry.npm.taobao.org/
# 也可以切换回默认源
$ npm config set registry https://registry.npmjs.org
3. 生成package.json
package.json文件记录了包名，版本，描述，入口文件，仓库地址，执行脚本命令，依赖，开发依赖，版权声明等信息。
我们创建一个目录 hello-npm 来进行演示，执行 npm init 命令会出现一下选项让我们选择和填写，有默认值的可以进行修改也可以直接回车进入下一项；npm init -y则不会询问，它会直接在目录中生成 package.json文件。
$ mkdir hello-npm
$ cd hello-npm
# 逐项配置
$ npm init
# 静默配置
$ npm init -y
4. 安装依赖
也就是下载包，把需要的库、框架文件下载到项目中。举例下载请求库 axios
# 安装axios，但不把依赖记录到package.json
$ npm i axios
# 安装axios, 并在package.json中记录依赖 dependencies
$ npm i axios -S
# 安装webpack，并在package.json中记录开发依赖 devDependencies
$ npm i webpack -D
# 全局安装 yarn
$ npm i yarn -g
其中 i 是 install的缩写， -S是 --save的缩写，-D是 --save-dev的缩写，-g表示安装到全局环境中，安装后在任何目录能执行该命令。
# 不使用缩写的写法，效果同上
$ npm install aixos --save
$ npm install webpack --save-dev
$ npm install yarn --global
还有一个命令是安装package.json中声明的全部依赖
$ npm i
也就是 npm i 后面不带任何参数，就会执行package.json中的所有依赖，这在初始化项目的时候非常有用，避免了逐个安装依赖。
5. 卸载依赖
# 移除依赖，但不删除package.json中的该依赖项
$ npm uninstall axios
# 移除依赖，并删除package.json中的该依赖项
$ npm uninstall axios -S
# 移除依赖，并删除package.json中的该开发依赖项
$ npm uninstall webpack -D
# 移除全局依赖
$ npm uninstall yarn -g
6. 执行 scripts 中声明的命令
我们在 package.json中的 scripts 字段添加一个命令 test
"scripts": {
"test": "echo \"hello\""
}
在终端执行
$ npm run test
# 输出
hello
在实际的开发中，这个scripts是很有用的一个配置项。
比如开发的是vue应用，最常用的是 npm run serve 就能启动vue项目了。
# 启动开发环境
$ npm run serve
# 构建生产版本
$ npm run build
我们打开vue-cli3创建的vue项目下的 package.json，可以看到以下配置信息。所以我们执行以上命令时，实际上时运行了这里声明的命令。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
7. 小结
了解了安装包，卸载包，执行脚本命令，基本上在开发上就够用了。
接下来看看如果我们自己开发了一个很赞的包想分享给更多的人使用，那该如何做呢？
发布自己的package
1. 在入口文件导出模块
在package.json中的main指定的入口文件(默认是 index.js)中，导出你开发的模块。
// index.js
exports.printMsg = function() {
console.log("A message from the demo package");
}
2. 在npmjs.com注册账号
打开 npmjs.com，点击 sign up，在页面输入用户名，邮箱，密码进行注册。
3. 在终端登录npm账号
注意，这里要先把源切换回npm官方源。然后根据提示输入用户名，密码，otp也就是一次性密码，会发送到你的邮箱。
$ npm config set registry https://registry.npmjs.org
$ npm login
# 输出，说明登录成功
Logged in as <username> on https://registry.npmjs.org/.
4. 执行发布
登录成功后，在项目目录下执行发布命令
$ npm publish
# 输出
...
npm notice Publishing to https://registry.npmjs.org/
+ [email protected]
也可以用 npm view <包名> 这个命令查看， <包名>就是package.json里写的name。可以看到发布的包的信息。
通过浏览器在npmjs.com也能看到自己发布的包了。
如果出现与npm上现有项目名字相近或相同，是不允许发布的，此时根据提示可以修改package.json中的name字段后再次尝试 publish。
5. 使用自己发布的 package
返回项目上层创建一个目录，或者随便一个项目外的目录中，install 自己的包。
$ cd ..
# 新建一个目录
$ mkdir use-example
# 打开目录
$ cd use-example
# 添加package.json
$ npm init -y
# 安装刚刚发布的包
$ npm i create-captcha -S
在项目中新建一个文件，引用模块。
// index.js
const createCaptcha = require("create-captcha");
console.log(createCaptcha.version);
createCaptcha.test();
用node.js执行该文件
$ node index.js
# 输出
v0.0.1
570736
648575
428696
909049
870945
755695
525637
705223
253521
549539
模块功能正常，说明模块已经通过验证了。这时候就可以开始推广我们自己的包了。
更新维护package
npm version <update_type>
<update_type> 的取值是语义化的发布类型值： patch, minor, 或者 major
对应的是打补丁(微小更新)，小版本(次要更新)，大版本(主要更新)。
$ npm version patch
# 输出, 可以看到自动把版本号最后一个数字自动变为2了
v0.0.2
# 需要执行 publish 才会更新到线上包
$ npm publish
注意：npm version patch 并不会直接发布包，需要再次执行 npm publish 才能更新线上包!
我们在引用包的项目中需要更新的话，执行
$ npm update create-captcha
至此，npm的使用，和发布管理自己包都可以有了一个清晰的认识了。
更多详细内容，可以查看官方github和中文文档。
github地址 https://github.com/npm/cli
npm 中文文档