你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

创建项目

// 创建项目
npm init
// 直接使用默认值创建项目
npm init -y

镜像源相关

1.查看镜像源
npm get registry
2.切换官方源
npm config set registry http://www.npmjs.org
3.切换淘宝源
npm config set registry http://registry.npm.taobao.org

安装模块

使用npm install 模块名来安装,你可以使用其简写npm i

一次性安装多个模块

无需为你要安装的每个模块都输入一遍npm i指令,像这样

npm i gulp-pug
npm i gulp-debug
npm i gulp-sass

你只需要输入一行命令即可一次性批量安装模块

npm i gulp-pug gulp-debug gulp-sass

如果安装的所有模块的前缀是相同的,则可以这样安装,无需输入完整模块名

npm i gulp{-debug,-sass,-pug}

使用一些安装标志的快捷方式

如果你想安装一些包到生产环境依赖下面,你通常是这样安装:

npm i gulp --save-prod
// 或者
npm i gulp -P

同理,开发环境下的依赖安装,你可以用-D代替–save-dev

npm i gulp --save-dev
// 或者
npm i gulp -D

当你不带任何安装标志时,npm 默认将模块作为依赖项目添加到package.json文件中。如果你想避免这样,你可以使用no-save,这样安装:

npm i vue --no-save

npm install --save 和npm install --save-dev的区别

**以npm安装webpack为例:

npm install echarts
  • 会把 echarts 包安装到 node_modules 目录中
  • 不会修改 package.json
  • 之后运行 npm install 命令时,不会自动安装 echarts
npm install echarts --save
  • 会把 echarts 包安装到 node_modules 目录中
  • 会在 package.json的dependencies 属性下添加 echarts
  • 之后运行 npm install 命令时,会自动安装 echarts到node_modules 目录中
  • 之后运行 npm install –production 或者注明 NODE_ENV 变量值为 production时,会自动安装 echarts 到 node_modules 目录中
npm install echarts --save-dev
  • 会把 echarts 包安装到 node_modules 目录中
  • 会在 package.json 的 devDependencies 属性下添加 echarts
  • 之后运行 npm install 命令时,会自动安装 echarts 到node_modules 目录中
  • 之后运行 npm install –production 或者注明 NODE_ENV 变量值为 production 时,不会自动安装echarts 到 node_modules 目录中
总结

devDependencies节点下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩 css、js 的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。

像 echarts 这些模块是项目运行必备的,应该安装在 dependencies 节点下,所以我们应该使用 --save 的形式安装。

获取安装包信息

使用 npm view xxx 或 npm v xxx 可以查看包信息,例如:

npm v vue

安装指定版本安装包

如果你想安装一个不是最新版本的安装包,你可以指定某个版本来安装,如:

npm i vue@2.5.15

鉴于记住标签比记住版本数字容易多了,你可以使用用 npm v 命令来查到的版本信息列表里面的 dist-tag 来安装,比如

npm i vue@beta

升级依赖包

// 更新全局包:
npm update <name> -g

// 更新生产环境依赖包:
npm update <name> --save

// 更新开发环境依赖包:
npm update <name> --save-dev

卸载包

如果你不想转到 package.json 文件并手动删除依赖包,则可以用以下方法删除:

npm uninstall vue

这个命令会删除 node_modules 文件夹及 package.json 中对应的包。当然,你也可以用rm,un或者r来达到相同的效果:

npm rm vue

如果由于某些原因,你只想从 node_modules 文件夹中删除安装包,但是想在package.json 中保留其依赖项,那么你可以使用no-save标志,如:

npm rm vue --no-save

依赖枚举

如果你想看一下你的项目依赖了哪些安装包,你可以这样看:

npm ls

这个命令会将你项目的依赖列举出来,并且各个安装包的依赖也会显示出来。如果你只想看本项目的依赖,你可以这样:

npm ls --depth=0

这样打印出来的结果就是本项目的依赖,像这样:

├── jquery@3.3.1
├── vue@2.5.17
└── yarn@1.12.3

当然,你也可以加上g来看看你全局安装的依赖包,如:

npm ls -g -depth 0

过期依赖枚举

大多数时候,你需要保持本地依赖的更新,你可以在项目目录下先查看一下安装包有没有版本更新,如:

npm outdate

这个命令将会列出所有你可能有更新的过时的安装包列表,如图:
在这里插入图片描述

执行测试

你可以使用npm run tests来执行测试用例,但是你可以更方便地用npm test或者npm t来执行。

显示可用脚本

我们可以通过打开package.json文件来查看有哪些可执行的脚本,但是我们还可以这样查看:

npm run

如果在package.json中有如下配置:

"scripts": {
  "test": "jest",
  "build": "gulp build"
}

那么执行这个命令之后,会显示以下信息:

Lifecycle scripts included in npm:
  test
    jest
available via `npm run-script`:
  build
    gulp-build

列出所有NPM环境的可用变量

你可以使用这个命令来列出所有NPM环境的可用变量:

npm run env | grep npm_

执行后,将会打印出这样的信息:

npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth

这样变量的用处就是,可以在脚本中使用它们,还可以创建自己的变量。

创建自己的NPM可用变量

你可以在package.json中添加新的 key 来创建自己的npm变量,可以是任何 key ,我更喜欢将所有的npm变量都放在一个config中,这样看起来比较清晰:

"config": {
  "build_folder":"./dist"
}

你添加了之后,重新执行npm run env | grep npm_,就能看到以下信息:

npm_package_config_build_folder=./dist
npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth
.

默认情况下,npm会重命名你的变量,给其加上前缀npm_package,并将其结构保留在package.json文件中,即变为config_build_folder

在npm脚本中使用npm变量

你可以看到可用变量的完整列表,如果你想使用这些变量中的任何值,就可以在package.json中使用了,如:

"scripts": {
  "build": "gulp build --dist $npm_package_config_build_folder"
}

当你执行npm run build的时候,实际执行的是这样:

gulp build --dist ./dist

参考

NPM命令实用使用技巧总结
Yarn 安装与使用详细介绍

推荐阅读

Vue源码学习目录

Vue源码学习完整目录


谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐