13 个 npm 快速开发技巧

译者：前端小智

原文：medium.com/@bretcamero…

为了保证的可读性，本文采用意译而非直译。

为了回馈读者，《大迁世界》不按期举行(每月一到三次)，现金抽奖活动，保底200，外加用户赞扬，但愿你能成为大迁世界的小锦鲤，快来试试吧

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

---

天天，数以百万计的开发人员使用 npm 或 yarn 来构建项目。运行npm init或npx create- response -app等命令几乎构建JS项目的首选方式，不管是为客户端或服务器端，仍是桌面应用程序。

可是npm不只仅是初始化项目或安装包。在本文中，咱们将会介绍 npm 的13个技巧来最大限度地利用npm:从简单的快捷方式到自定义脚本。

因为咱们中的许多人天天都使用npm，从长远来看，即便节省少许的时间也会产生显著的影响。这些技巧是针对初学者和中级开发人员的，可是即便您是一位经验丰富的开发人员，我但愿你仍然可以找到一到两个你之前没有遇到过的特性。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

主要内容

1. 学习基本快捷方式

2. 设置默认npm init属性

3. 让脚本跨平台兼容

4. 并行运行脚本

5. 在不一样的目录中运行脚本

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

7. 列出并选择可用脚本

8. 运行先后脚本

9. 控制应用程序版本

10. 从命令行编辑package.json

11. 自动设置和打开你的github库

12. 自定义npm init脚本

13. 使用自定义npm init脚本将你的第一个 Commit 提交到 GitHub

1.学习基本快捷方式

咱们从最基本的开始,学习最多见的npm快捷方式从长远来将会节省不少时间。

• 安装  —  常规：npm install，简写：npm i。

• 测试  —  常规：npm test，简写：npm t。

• 帮助  —  常规：npm --help，简写：npm -h。

• 全局标志 —  常规：--global，简写：-g。

• 保存为开发依赖 - 常规： - save-dev，简写：-D。

• npm init 默认值 - 常规：npm init --yes 或 npm init --force，简写：npm init -y 或 npm init -f

咱们知道使用-save或-S来保存包，但如今这是个已是默认值。要安装一个包而不保存它，可使用 ——no-save标志。

不太常见的快捷键

还有一些不常见的快捷方式，以下：

• 安装包信息将加入到optionalDependencies（可选阶段的依赖）- 常规：--save-optional， 简写：-O。

• 精确安装指定模块版本 - 常规：--save-optional， 简写：-O。

若是须要在本地保存一个npm包，或者经过单个文件下载选择一组可用的包，可使用--save-bundle或-B将它们捆绑在一块儿，并使用npm pack得到捆绑包。

根的快捷方式

. 符号一般用于表示应用程序的根目录，npm术语中的应用程序入口点，即package.json中指定为“main”的值

{
  "main": "index.js"
}
复制代码

这个快捷方式也能够用于像npx create-react-app . 这样的命令。所以，能够运行npx create-react-app .，而不是使用 npx create-react-app my-app 建立一个新的my-app目录。

2. 设置默认npm init属性

当运行npm init开始一个新项目时，你可能会发现本身一次又一次地输入配置细节。假如，你多是项目的主要负责人。有时为了节省时间，能够为这些字段设置默认值，以下所示：

npm config set init.author.name "Joe Bloggs"
npm config set init.author.email "JoebLoggs@gmail.com"
npm config set init.author.url "Joebloggs.com"
npm config set init.license "MIT"
复制代码

要检查是否正确添加了这些属性，在终端输入 npm config edit查看配置文件信息。固然也j能够经过直接在打开的配置文件编辑信息。 若是要编辑全局npm设置，使用npm config edit -g。

要从新初始化默认设置，可使用如下脚本。第一行用空字符串替换配置文件，第二行用默认设置从新填充配置文件。

echo "" > $(npm config get userconfig)
npm config edit
复制代码

上面的脚本将重置用户默认值，下面的脚本将重置全局默认值

echo "" > $(npm config get globalconfig)
npm config --global edit
复制代码

3. 让脚本跨平台兼容

任何在命令行上运行的代码都有兼容性问题的风险，特别是在Windows和基于unix的系统(包括Mac和Linux)之间。若是你只处理特定的项目，那么这不是问题，可是在许多状况下，跨平台兼容性颇有必要的:任何开放源码或协做项目，以及示例和教程项目，都应该可以工做，而无论操做系统是什么。

谢天谢地，解决方案很简单。有几个选项可供选择，但效果最好的是cross-env。使用npm i -D cross-env将其做为开发依赖项安装。而后在任何环境变量以前包括关键字cross-env，就像这样：

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

cross-env是 实现跨平台兼容性的最无缝的方法，但还有其余两个流行的工具，它们能够帮助实现跨平台兼容性：

• rimraf 能够安装在全球运行跨平台脚本

• ShellJS 是Unix shell命令在Node.js API上的可移植实现。

4. 并行运行脚本

可使用&&来依次运行两个或多个进程。可是并行运行脚本呢?为此，咱们能够从各类npm包中进行选择。concurrent 和 npm-run-all 是最流行的解决方案。

首先经过 npm i -D concurrently 安装开发依赖。而后按照如下格式将其添加到脚本中：

{
  "start": "concurrently \"command1 arg\" \"command2 arg\""
}
复制代码

5. 在不一样的目录中运行脚本

有时，在不一样的文件夹中拥有一个包含多个package.json文件的应用程序。 从根目录访问这些脚本会很方便，而不是每次要运行脚本时导航到不一样的文件夹，有两种方法能够执行此操做。

第一种是手动 cd 并运行对应的命令：

cd folder && npm start && cd ..
复制代码

但还有一个更优雅的解决方案，即便用--prefix标志指定路径:

npm start --prefix path/to/your/folder
复制代码

下面是一个工做应用程序中此解决方案的示例，咱们但愿在前端(在客户机目录中)和后端(在服务器目录中)运行 npm start。

"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",
复制代码

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

一般，在开发全堆栈应用程序期间，我们可能但愿同时启动服务器和客户端。wait-on 节点模块提供了一种方便的方法来确保进程只在某些进程就绪时发生:在咱们的例子中，咱们有一个特定的端口。

例如，这是我在使用React前端的Electron项目中使用的dev脚本。 同时使用，脚本并行加载表示层和Electron窗口。 可是，使用wait-on，只有在 http://localhost:3000 启动好，才会打开Electron窗口。

"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
复制代码

此外，React默认状况下会打开一个浏览器窗口，但对于 Electron 开发来讲，这是没必要要的。我们能够经过传递环境变量BROWSER=none来禁用此行为。

7. 列出并选择可用脚本

列出package.json文件中可用的脚本很简单：只需转到项目的根目录并在终端中输入npm run。

可是有一种更方便的方法能够得到脚本列表，能够当即运行该列表:为此，全局安装 NTL (npm任务列表)模块:

npm i -g ntl
复制代码

而后在项目文件夹中运行ntl命令，能够得到一个可用脚本列表，并能够选择其中一个运行。

8. 运行先后脚本

你可能熟悉prebuild和postbuild这样的脚本，它们容许你定义在构建脚本以前或以后运行的代码。但事实上，pre和post能够在任何脚本以前添加，包括自定义脚本。

这不只使你的代码更干净，并且还容许你单独运行pre和post脚本。

9. 控制应用程序版本

与手动更改应用程序的版本相比，npm 提供了一些有用的快捷方式来完成这一点。 要增长版本，请在运行 npm version加上major，minor或patch`：

// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0
复制代码

根据更新应用程序的频率，能够经过在每次部署时增长版本号来节省时间，使用如下脚本:

{
  "predeploy": "npm version patch"
}
复制代码

10. 从命令行编辑 package.json

package.json是一个常规的json文件，所以可使用工具库json从命令行进行编辑。 这在修改package.json提供另一种新的方式，容许w你q建立超出默认值的快捷方式。 全局安装：

npm install -g json
复制代码

而后，可使用它来使用-I进行就地编辑。 例如，要添加值为“bar”的新脚本“foo”，这样写：

json -I -f package.json -e 'this.scripts.foo="bar"'
复制代码

11. 自动设置和打开你的github库

若是package.json文件中有“repository”，则能够经过输入 npm repo在默认浏览器中打开它。

若是你的项目已经链接到远程存储库，而且已经在命令行上安装了git，那您可使用这个命令找到你的链接存储库

git config --get remote.origin.url
复制代码

更好的是，若是你按照上面的提示并安装了json模块，可使用下面的脚本自动将正确的存储库添加到 package.json

json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""
复制代码

12. 自定义npm init脚本

让咱们更进一步，使用咱们本身的npm init脚本，它接受GitHub存储库URL并自动推送咱们的第一个提交。在本技巧中，咱们将讨论如何建立自定义npm init脚本。在下一个(也是最后一个)技巧中，咱们将合并git。

能够经过重定向到主目录中的.npm-init.js文件来编辑npm init脚本。（在Windows上，一般是 c/Users/<用户名>，在 Mac 上，它是/Users/<用户名>）。

让咱们首先在咱们的主目录中建立一个.nmm-init.js文件。为了确保npm init被指向正确的文件，能够运行:

npm config set init-module ~\.npm-init.js
复制代码

在集成git以前，这里有一个简单的.npm-init.js文件，它模拟了默认npm init的问题

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),  
  main: prompt('entry point', 'index.js'),
  repository: prompt('git repository', ''),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
  license: prompt('license', 'ISC')
}
复制代码

每一个问题都遵循nameInPackage模式:prompt('nameInPrompt','defaultValue')。要在缺省状况下设置值而不带问题，只需删除prompt方法。

若是要返回默认设置，只需删除.npm-init.js。

13. 使用自定义npm init脚本将你的第一个 Commit 提交到 GitHub

为了将git命令合并到.npm-init.js文件中，须要一种方法来控制命令行。为此，咱们可使用child_process 模块。在文件的顶部引入它，由于咱们只须要execSync函数，因此可使用析构赋值语法本身获取它：

const { execSync } = require('child_process');
复制代码

我还建立了一个helper函数，它将函数的结果打印到控制台：

function run(func) {
  console.log(execSync(func).toString())
}
复制代码

最后，咱们将提示输入GitHub存储库URL，若是提供，咱们将生README.md文件，并启动咱们的第一次提交。

repository: prompt('github repository url', '', function (url) {
  if (url) {
    run('touch README.md');
    run('git init');
    run('git add README.md');
    run('git commit -m "first commit"');
    run(`git remote add origin ${url}`);
    run('git push -u origin master');
  }
  return url;
})
复制代码

总的来讲，.npm-init.js文件大概以下：

const { execSync } = require('child_process');

function run(func) {
  console.log(execSync(func).toString())
}

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),
  main: prompt('entry point', 'index.js'),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
  license: prompt('license', 'ISC'),
  repository: prompt('github repository url', '', function (url) {
    if (url) {
      run('touch README.md');
      run('git init');
      run('git add README.md');
      run('git commit -m "first commit"');
      run(`git remote add origin ${url}`);
      run('git push -u origin master');
    }
    return url;
  }),
}
复制代码

package.json文件：

{
  "name": "Custom npm init",
  "version": "0.0.0",
  "decription": "A test project, to demonstrate a custom npm init script.",
  "main": "index.js",
  "keywords": [],
  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JoeBloggs/custom.git"
  },
  "bugs": {
    "url": "https://github.com/JoeBloggs/custom/issues"
  },
  "homepage": "https://github.com/JoeBloggs/custom#readme"
}
复制代码

你也能够经过合并GitHub API进一步实现这一点，这样就不须要建立一个新的存储库，这部分留给大家本身完成。

总的来讲，但愿这篇文章可以让你了解npm能够实现的目标，并展现了一些提升工做效率的方法 - 不管是你知道常见的快捷方式，仍是经过充分利用脚本 package.json，或编写自定义版本的npm init。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。