关于NPM你必须要知道的常用命令-原创手记-慕课网

npm:全称node package mananger是世界上最大规模的包管理系统官网是这样介绍的 Build amazing things…

那咱们就来看看他做了哪些惊人的事~

一.npm init

默认大家肯定比较熟悉了直接 npm init -y了事这回我们再来仔细看看

{
  "name": "webyouxuan",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {},
  "license": "ISC"
}

这里先声明npm的版本是6.7.0因为我的node版本是v11.14.0

咱们来逐个说说这里比较重要的字段:name、version、main、scripts、license

name是当前包的名字也就是最终发布在npm官网上包的名字。不能和已有的包重名哦
version就是当前包的版本号主要我们要探究如果优雅的管理版本号。
main就是当前包的入口文件也就是使用require默认引入的文件。
scripts可以配置一些执行脚本。
license是协议许可。

二.npm install

1.全局安装

npm install http-server -g

前端优选

全局安装的意思很简单就是安装的模块会被安装到全局下可以在命令行中直接使用安装的包,其实只是在**/user/local/bin目录下作了个链接连接到 /usr/local/lib/node_modules/http-server/bin/http-server了这个文件当我们执行http-server**这个命令时就会调用链接的这个文件。

mac因为有权限问题这里我们加sudo来执行命令

我们可以自己来尝试写一个包创建bin目录新增www文件,名字叫什么无所谓啦~

#! /usr/bin/env node
console.log('关注webyouxuan哈'); // #! 这句表示采用node来执行此文件同理shell可以表示sh

更新package.json文件

"bin": {
	"youxuan":"./bin/www"   // 这里要注意名字和你建立的文件夹要相同
},

好了写好啦这里我们先不说发包的事用一个常用的命令他可以实现链接的功能

npm link

[图片上传失败…(image-a09819-1567445632022)]

这样我们在命令行中直接输入youxuan就可以打印出关注webyouxuan

2.本地安装

npm install webpack --save-dev

本地安装很好理解就是所谓的在项目中使用而非在命令行中使用这里我们看到生成了一个package-lock.json文件而且将安装的模块放到了node_modules下而json中也新增了些内容

"devDependencies": {
    "webpack": "^4.39.3"
}

这里我们先来简单介绍下基本的使用

--save-dev代表当前依赖只在开发时被应用如果默认不写则相当于 --save是项目依赖开发上线都需要的

也可以指定版本号来安装包

npm i jquery@2.2.0 # install可以简写成i

默认执行npm i会安装项目中所有需要的依赖如果只想安装生产环境的依赖可以增加--production参数

三.package-lock文件

自npm 5之后所有的依赖包都采用扁平化管理的方式
package-lock.json 的作用是锁定依赖安装结构保证在任意机器上执行 npm install 都会得到完全相同的 node_modules 结果因为package-lock.json存储了所有安装的信息。

"name": "youxuan",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@webassemblyjs/ast": { 
    "version": "1.8.5", // 当前依赖的版本
    "resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.8.5.tgz", // 从哪个渠道安装的
    "integrity": "sha1-UbHF/mV2o0lTv0slPfnw1JDZ41k=", // 内容hash
    "dev": true,
    "requires": {
    "@webassemblyjs/helper-module-context": "1.8.5",
    "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
    "@webassemblyjs/wast-parser": "1.8.5"
    }
},
....

如果手动更新了package.json文件执行安装命令会下载对应的新版本,并且会自动更新lock文件~

四.依赖方式

简单介绍下常见的依赖方式

1.dependencies 项目依赖

可以使用npm install -S或 npm install --save保存到依赖中当发布到npm上时dependencies下的模块会作为依赖一起被下载!

2.devDependencies 开发依赖

可以使用npm install -D或 npm install --save-dev保存到依赖中。
当发布到npm上时devDependencies下面的模块就不会自动下载了如果只是单纯的开发项目dependenciesdevDependencies只有提示的作用

3.peerDependencies 同版本依赖

同等依赖如果你安装我那么你最好也安装我对应的依赖如果未安装会报出警告

"peerDependencies": {
    "jquery": "2.2.0"
}

npm WARN youxuan@1.0.0 requires a peer of jquery@2.2.0 but none is installed. You must install peer dependencies yourself.

4.bundledDependencies 捆绑依赖

"bundleDependencies": [
    "jquery"
 ],

使用npm pack 打包tgz时会将捆绑依赖一同打包。

5.optionalDependencies 可选依赖

如果发现无法安装或无法找到则不会影响npm的安装。

五.npm版本管理

npm采用了semver规范作为依赖版本管理方案。semver 约定一个包的版本号必须包含3个数字

MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号

MAJOR 对应大的版本号迭代做了不兼容旧版的修改时要更新 MAJOR 版本号
MINOR 对应小版本迭代发生兼容旧版API的修改或功能更新时更新MINOR版本号
PATCH 对应修订版本号一般针对修复 BUG 的版本号

当我们每次发布包的时候都需要升级版本号

npm version major  # 大版本号加 1其余版本号归 0
npm version minor  # 小版本号加 1修订号归 0
npm version patch  # 修订号加 1

如果使用git管理项目会自动 git tag 标注版本号

来看看版本号的标识含义:

range	含义	例
`^2.2.1`	指定的 MAJOR 版本号下, 所有更新的版本	匹配 `2.2.3`, `2.3.0`; 不匹配 `1.0.3`, `3.0.1`
`~2.2.1`	指定 MAJOR.MINOR 版本号下所有更新的版本	匹配 `2.2.3`, `2.2.9` ; 不匹配 `2.3.0`, `2.4.5`
`>=2.1`	版本号大于或等于 `2.1.0`	匹配 `2.1.2`, `3.1`
`<=2.2`	版本号小于或等于 `2.2`	匹配 `1.0.0`, `2.2.1`, `2.2.11`
`1.0.0 - 2.0.0`	版本号从 1.0.0 (含) 到 2.0.0 (含)	匹配 `1.0.0`, `1.3.4`, `2.0.0`

预发版

alpha(α)预览版或者叫内部测试版一般不向外部发布会有很多bug一般只有测试人员使用。
beta(β)测试版或者叫公开测试版这个阶段的版本会一直加入新的功能在alpha版之后推出。
rc(release candidate)最终测试版本可能成为最终产品的候选版本如果未出现问题则可发布成为正式版本。

2.1.0-beta.1这样声明的版本用户不会立马使用可以用来做测试使用。

六.scripts配置

在package.json中可以定义自己的脚本通过npm run来执行

"scripts": {
   "hello": "echo webyouxuan",
   "build": "webpack"
}

我们可以使用 npm run hello执行脚本也可以使用 npm run build执行node_modules/.bin目录下的webpack文件

npm run 命令执行时会把 ./node_modules/.bin/ 目录添加到执行环境的 PATH 变量中因此如果某个命令行包未全局安装而只安装在了当前项目的 node_modules的通过 npm run 一样可以调用该命令。
执行 npm 脚本时要传入参数需要在命令后加 -- 标明如 npm run hello -- --port 3000 可以将 --port 参数传给hello 命令

npm 提供了 pre 和 post 两种钩子机制可以定义某个脚本前后的执行脚本没有定义默认会忽略

"scripts": {
   "prehello":"echo 关注",
   "hello": "echo webyouxuan",
   "posthello":"echo 谢谢~"
}

可以通过打印全局env和在项目下执行npm run env来对比PATH属性不难发现在执行npm run 的时候确实会将 ./node_modules/.bin/ 目录添加到PATH中

七.协议

前端优选

不废话这张图就说明了为什么MIT许可是最大的了!

八.npx用法

npx命令是npm v5.2之后引入的新命令npx可以帮我们直接执行node_modules/.bin文件夹下的文件

1.执行脚本

npx webpack

是不是省略了配置scripts脚本啦

2.避免安装全局模块

全局安装的模块会带来很多问题例如多个用户全局安装的模块版本不同

npx create-react-app react-project

我们可以直接使用 npx 来执行模块它会先进行安装安装执行后会将下载过的模块删除这样可以一直使用最新版本啦!

九.包的发布

包的发布比较简单首先我们需要切换到官方源,这里推荐个好用的工具nrm

npm install nrm -g
nrm use npm # 切换到官方源

之后更新名字这里也可以发布作用域包选定版本后忽略文件夹可以使用 .npmignore一切就绪后发布

npm publish

ok我们的包就可以成功的发布到npm上啦

十. 更多资料

参考