npm实用小技巧

初始化包

npm init 询问关于包、作者等信息
npm init -y 自动生成我们的package.json

配置默认初始化配置，例如作者详细信息deng

1 2	npm config set init-author-name "Ankit Jain" npm config set init-author-email "ankitjain28may77@gmail.com"

然后运行npm init -y自定生成我们的包

{
  "name": "<name of the root dir>",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ankit Jain <ankitjain28may77@gmail.com>",
  "license": "ISC"
}

简约安装包命令

# Install package
npm install <package_name>
Shortcut: npm i <package_name>
# Install devDependencies
npm install --save-dev <package_name>
Shortcut: npm i -D <package_name>
# Install dependencies (This is default)
npm install --save-prod <package_name>
Shortcut: npm i -P <package_name>
# Install packages globally
npm install --global <package_name>
Shortcut: npm i -g <package_name>

从npm 5.x开始，默认什么参数都不加，自动添加到dependencies中

main

一个常用的npm包
1
2
3
{
main:'lib/index.js'
}
指定程序的主入口文件，其他项目引用这个npm包时，实际上引入的是lib/index中暴露出去的模块

全新安装依赖包

npm ci
- 根据package-lock.json安装依赖包，保证团队使用版本完全一致
- 会删除项目中现有的node_modules，重新安装
- 不会写入package.json 安装基本是冻结的
- 只能一次安装一整个项目，不能安装单独的依赖包
- 如果package-lock.json过时（和packge.json冲突），会报错，避免项目依赖陷入过时状态
- 如果使用它，记得把package-lock.json加入git仓库

快速导航到任何npm软件包的文档

导航到文档

1
2
3

npm docs <package-name>
OR
npm home <package-name>

导航到github
1
npm repo <package-name>
导航到github的issue
1
npm bug <package-name>

删除重复的包

我们可以通过运行 npm dedupe 命令删除重复的依赖项。它通过删除重复的程序包并在多个从属程序包之间有效地共享公共依赖项，简化了总体结构。这样就形成了一个平面且具有重复数据删除功能的树。
1
npm dedupe or npm ddp

列出所有已安装的软件包

通过运行 npm list 命令，我们可以列出项目中安装的所有npm包。它将创建一个树结构，显示已安装的包及其依赖项。
1
npm list or npm ls
我们可以使用 —depth 标志来限制搜索深度：
1
npm ls --depth=1

NPM scripts

列出项目存在的所有npm环境变量

1	npm run env

输出

npm_config_save_dev=
npm_config_legacy_bundling=
npm_config_dry_run=
npm_config_viewer=man
.
.
npm_package_license=ISC                # Package properties
npm_package_author_name=Ankit Jain
npm_package_name=npm-tips-and-tricks   # Name of our package

可以通过process.env.npm_package_name和类似的其他变量在代码中访问上述env变量

在package.json中配置自己的变量
1
2
3
"config"：{
"myvariable":"Hello World"
}
使用npm run env查看

运行脚本

package.json

"scripts":{
    "echo-hello":"echo 'Hello'",
    "echo-helloworld":"echo 'Helloworld'"
    "echo-both":"npm run echo-hello && npm run echo-helloworld",
    "echo-both-in-parallel":"npm run echo-hello & npm run echo-helloworld"
}

连续运行可使用&&

npm run echo-both
# Output
> npm run echo-hello && npm run echo-helloworld
> npm-tips-and-tricks@1.0.0 echo-hello 
> echo "Hello"
Hello
> npm-tips-and-tricks@1.0.0 echo-helloworld
> echo "Helloworld"
Helloworld

并行运行&

npm run echo-both-in-parallel
# Output
> npm run echo-hello & npm run echo-helloworld
> npm-tips-and-tricks@1.0.0 echo-hello
> echo "Hello"
> npm-tips-and-tricks@1.0.0 echo-helloworld
> echo "Helloworld"
Hello
Helloworld

npm命令中使用npm 环境变量使用$

npm run echo-packagename
# Output
> echo $npm_package_name
npm-tips-and-tricks
-------------
npm run echo-myvariable
# Output
> echo $npm_package_config_myvariable
Hello World

将参数传递给另一个npm脚本

npm run echo-passargument
# Output
> npm run echo-packagename -- "hello"
> npm-tips-and-tricks@1.0.0 echo-packagename
> echo $npm_package_name "hello"
npm-tips-and-tricks hello

脚本跨平台兼容

安装开发依赖项 cross-env
1
npm i -D cross-env

使用在任何环境变量之前包括关键字cross-env，就像这样：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/wepack.config.js"
  }
}

在不同的目录中运行脚本

方法一手动cd
1
cd folder && npm start && cd ..
方法二指定路径
1
npm start --prefix path

并行运行脚本

安装开发依赖
1
npm i -D concurrently

然后按照以下格式将其添加到脚本中

1
2
3

{
"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",
}

延迟运行脚本直到端口准备就绪

例如，这是我在使用React前端的Electron项目中使用的dev脚本。同时使用，脚本并行加载表示层和Electron窗口。但是，使用wait-on，只有在 http://localhost:3000 启动好，才会打开Electron窗口。
1
"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
列出并选择可用脚本
- 方法一
  1
  npm run
- 方法二全局安装 NTL (npm任务列表)模块:
  1
  npm i -g ntl
  效果如下：