NPM 一些有用的提示和技巧

2018-12-20

生成 package.json
安装模块
一次安装多个模块
使用 install flags(安装参数) 的快捷方式
获取包信息
安装特定版本的软件包
搜索 package(包)
卸载 package(包)
列出依赖项
运行测试
显示可用的 script
从 Github 仓库安装 package(包)
打开包的 Github 页面
列出所有可用的 NPM 环境变量
添加自己的 NPM 变量
在 NPM script 中使用 NPM 变量

如果你在日常工作流程中使用 NPM ，我相信你会喜欢这些提示和技巧。

生成 package.json

我们通常执行 npm init，然后开始添加 npm 请求的信息。但是，如果我们不关心所有这些信息，并且希望保留默认值，那么对于 npm 请求的每一条数据，我们都按 enter 键。为了避免这种情况，你可以输入 npm init -y。这样就可以跳过问题询问了。

你也可以使用 npm init --yes 作用是一样的。

安装模块

你可以使用更加简单的 npm i 来代替 npm install。

一次安装多个模块

你不需要为每个模块键入一个 npm install 命令，例如：

1	npm i gulp-pugnpm i gulp-debugnpm i gulp-sass

你可以只运行一个命令，一次性安装所有这些模块：

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

还有更加简单的方法，如果所有名称都以相同的前缀开头，你不需要键入整个名称：

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

使用 install flags(安装参数) 的快捷方式

如果要安装软件包并将其另存为生产依赖项，则通常会这样做

1	npm i gulp --save-prod

你可以使用 -P 快捷方式，像这样：

1	npm i gulp -P

对于开发依赖项也是一样，不需要键入完整的 --save-dev 标志，你可以使用 -D 快捷方式，像这样：

1	npm i gulp -D

默认情况下，当你运行不带任何 flags(参数) 的 npm install 时，npm 会将包作为依赖项添加到 package.json 文件中。如果要防止这种情况，请使用 --no-save flags(参数) 安装，如下所示：

1	npm i gulp --no-save

获取包信息

下面的命令将显示 vue 包的相关信息：

npm view vue 或 npm v vue

如果你只想获得最新版本的软件包，可以试试下面这个命令：

1 2	> npm v vue version > 2.5.17

如果你想获得 npm 包完整的版本列表，请尝试复数形式

> npm v vue versions
> [ '0.0.0',
  '0.6.0',
  '0.7.0',
  ...
  '2.5.15',
  '2.5.16',
  '2.5.17-beta.0',
  '2.5.17' ]

安装特定版本的软件包

如果要安装版本，而不是最新版本的软件包，可以键入：

1	npm i vue@2.5.15

鉴于记忆名称比数字更容易（至少对我来说），你可以使用 dist-tag 列表中名称，运行 npm v 命令即可得到该列表，如下所示：

1	npm i vue@beta

搜索 package(包)

有时你可能记不住你前一段时间或你朋友推荐的某个 package(包) 的确切名称。在这种情况下，你可以使用 npm 搜索，直接在终端中执行搜索：

1	npm search gulp debug

或者

1	npm s gulp debug

这将打印包含描述，作者和一些其他信息的包列表：

卸载 package(包)

如果你不想打开 package.json 文件并从那里手动删除依赖项，则可以使用以下命令将其删除：

1	npm uninstall vue

这将从 node_modules 文件夹和 package.json 文件中删除该包。当然，你可以使用 rm ， un 或 r来实现相同的效果，例如：

1	npm rm vue

如果由于某种原因你只想从 node_modules 文件夹中删除包文件，但仍然将其作为依赖项保存在 package.json 文件中，则可以使用 --no-save 参数：

1	npm rm vue --no-save

列出依赖项

如果要查看项目依赖项列表，可以使用

npm ls

这将列出 package.json 文件中所有的依赖项以及它们的所有依赖项。如果你只想列出你的依赖项，你可以这样做

1	npm ls --depth=0

这将打印出这样的东西：

1
2
3

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

当然，如果要查看所有全局安装的包的列表，可以使用 -g 标志

1	npm ls -g -depth 0

运行测试

你可以使用 npm run tests 运行测试，但你可以用 npm test 甚至更简短的 npm t 代替。

显示可用的 script

有时，我们希望查看 package.json 文件中包含的脚本。我们当然可以打开 package.json 文件，但我们也可以这样做：

npm run

如果在 package.json 文件中有这样的配置，如下所示：

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

那么 npm run 命令将显示以下内容：

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

从 Github 仓库安装 package(包)

你可以直接从 Github 仓库安装一个包：

1	npm i https://github.com/sindresorhus/gulp-debug

或者你可以省略域名部分

1	npm i sindresorhus/gulp-debug

打开包的 Github 页面

你当然可以通过 Google 搜索，然后查找该页面，或者你可以执行以下操作：

1	npm repo create-react-app

无需安装软件包即可执行上述命令。

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

你可以通过运行以下命令来查看可供我们使用的 NPM 变量的完整列表：

1	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 环境变量，让我们看看如何创建。

添加自己的 NPM 变量

你可以通过向 package.json 文件添加自己的 NPM 变量。它可以是任何 key，但我更喜欢将所有 NPM 变量放在 config key 中，以保持结构有序。像这样：

1
2
3

"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 script 中使用 NPM 变量

一旦你看到了完整的变量列表，并且你希望在 script 中使用这些变量中的任何一个的值，那么你就可以在 package.json 中执行此操作(请参阅上一节中变量 npm_package_config_build_folder 的值)

1
2
3

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

一旦你用 npm run build 运行这个命令，它将被执行为

1	gulp build --dist ./dist

在我的日常工作流程中，这些是我最喜欢的快捷方式和命令，有没有你喜欢的快捷方式或命令没列在这篇文章中，欢迎留言告诉我。

英文原文：https://blog.usejournal.com/npm-tips-and-tricks-c96356fd1b12