使用npm发布自己的第一个包

平常我们在开发时或多或少都会使用一些相同的工具方法，每次使用时往往都是从一个项目拷贝到另一个项目，但是这样的拷贝有一个问题，因为工具方法常常散落到不同的项目里，每个项目都是根据自己的需要要用到的时候写进去的，然后如果有别的项目也要用到，要么就是重新写一个类似的，要么就是哪个项目做过拷贝过来。

虽然拷贝够解决问题，但是效率却很低，因为都是重复的劳动，时间都浪费在查找上了，那么有没有办法将这些工具函数集中到一处，每个项目都可以按需下载使用呢？

方法当然是有的，那就是发布自己的 npm 包，收集自己平常使用的工具函数，将其集中到一处，上传到 npm 上托管。

关于 npm 是什么，以及什么是包，可以看我之前的两篇文章：分别是真正理解 npm：从注册表到 JavaScript 包管理平台以及理解npm中的包和模块。

本文就带大家手摸手从 npm 注册开始发布一个自己的工具函数包，其步骤大致分为三部：

1. 注册 npm 账号
2. 本地创建项目，登录 npm 账号
3. 发布到 npm

npm 注册

首先登录 npm 官网，选择右侧的sign up进入到 npm 的注册页面：

注册 npm 很简单，只需要用户名和邮箱，用户名起个自己喜欢的英文马甲名，rose、jack 之类的，这里要注意username是唯一的且不可修改，如果不小心拼错了，以后也只能将错就错的使用了。

邮箱就用自己的qq邮箱，相信不会有人没有，密码设置需要 10 位以上字符，建议直接使用密码管理器生成一个复杂密码。

点击creat an Account后 npm 就会向我们的注册邮箱发送一个一次性密码，访问邮箱后获取密码然后验证：

输入完验证码就后就进入到了 npm 的首页，此时你就完成了 npm 账号的注册，首页有个横幅提示你没有开启双因素认证，关于双因素认证这个我们稍后说，我们先进行第二步：创建项目

创建本地项目

新建个文件夹，简单起名fengdu-utils，然后使用 vscode 打开项目，打开终端输入命令ny(npm init -y)（我这里自定义了终端命令的 alias）初始化包，关于如何设置终端 alias 可以看我之前的这篇文章：Mac键指如飞攻略之终端alias配置。

执行完成后会给我们创建一个package.json文件，其默认的内容如下，我们暂时不需要修改，就用这个配置就行：

{
  "name": "fengdu-utils",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

组织文件目录

创建index.js文件作为入口文件，创建lib/index.js作为工具函数的主入口，放在lib下目录的缘故是，考虑到未来会引入多个模块，这里我们暂时都只写在lib/index.js里。

在实际写工具函数之前，要先考虑下未来这个工具函数如何使用，首先我希望这个包的函数可以有两种使用方式，

• 一种是整个工具库的导入使用
• 一种是按需导入，可以只导入某一个函数

比如说，我有一个randomArray打乱数组的函数，我希望可以有这两种引入方式：

import utils from 'fengdu-utils'
utils.randomArray([1,2,3,4,5])

import {randomArray} from 'fengdu-utils'
randomArray([1,2,3,4,5])

要支持这两种方式，那么在我们的 index.js入口文件里就要有两种导出方式，具体代码如下：

import { randomArray } from './randomArray.js'
export { randomArray }

export default {
  randomArray
}

function randomArray(array = []) {
  return array.sort(() => Math.random() - 0.5)
}

这样我们就写好了拥有一个函数的工具包，下面就是把它发布到 npm 上，让它成为公网可访问的。

发布到 npm

将本地包发布到 npm 上也很简单，只需要在终端中执行 npm login命令，这里有两个注意点

1. 需要使用npm的官方源，使用 cnpm 是登陆不上的，要看到这一行显示才是对的，表示连接的是 npm 数据库：

npm notice Log in on https://registry.npmjs.org/

2. 国内的网络环境慢，可能会存在连接超时的问题，建议开启科学访问后再执行npm login

成功连接上 npm 后，控制台会输出如下字符：

npm notice Log in on https://registry.npmjs.org/
Login at:
https://www.npmjs.com/login?next=/login/cli/413d6e2a-e7be-4893-baa0-9eb6b7e40d6a
Press ENTER to open in the browser...

此时终端正在等待你的输入，等你键入回车后会自动打开浏览器让你输入一次性验证码，需要在你的注册邮箱上接收，这种方式比之前 npm 的登陆友好多了，以前要在终端上输入账号密码和邮箱，输错了还要从头再来，极其繁琐，现在只需要查看下邮箱验证码就行了。

邮箱验证成功后的页面

此时回到项目终端就会打印如下信息，表示你已经登录成功了

Logged in on https://registry.npmjs.org/.

我们可以通过命令npm whoami可以查看当前登录 npm 的账号

$ npm whoami
fengxiaodu

这样我们就在本地连接上了 npm，然后我们就可以执行npm publish来发布包了：

~/project/fengdu-utils npm publish
npm notice
npm notice 📦  fengdu-utils@1.0.0
npm notice Tarball Contents
npm notice 864B .vscode/settings.json
npm notice 238B index.js
npm notice 243B lib/index.js
npm notice 226B package.json
npm notice Tarball Details
npm notice name: fengdu-utils
npm notice version: 1.0.0
npm notice filename: fengdu-utils-1.0.0.tgz
npm notice package size: 737 B
npm notice unpacked size: 1.6 kB
npm notice shasum: 80f7d33b64b11f2ea0217da3321b1f865eb1f422
npm notice integrity: sha512-e8rdSeBfSlNGn[...]255tMhdLgTDIA==
npm notice total files: 4
npm notice
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ fengdu-utils@1.0.0

看到最后的+ fengdu-utils@1.0.0就说明自己的包发布成功了，于此同时你绑定的 npm 邮箱也会收到一封通知告知你成功的发布了自己的包。

接着我们访问 npm 官网查看自己的package

就可以看到自己有一个包了，从现在开始你也是有包的人了，全世界的开发者都可以使用你这个包。

你可能会说了就只有一个函数的包谁会用？这你可就错了，万丈高楼平地起，任何伟大的东西都是从零开始构建出来的，当你持续的为你的工具库增加函数，不断的迭代发展壮大它，谁知道它未来会变成怎样的样子，又会产生怎怎样的影响？

我们无法预测未来，但是尽可能的去把自己能想到的去做了，去实现了，那么我们就是在朝着成功迈进了。

有点扯远了，回到本文，你可能发现了，每次我们登录 npm 账号都得收邮箱验证码，如果频繁的更新，每次都要打开邮箱查看，也是挺麻烦的，那有没有办法可以快速验证我们的账号执行登录呢？

答案当然是有的，这就是我前面所说的稍后再谈的 npm 双因素认证。

开启 npm 双因素认证（2FA）

默认情况下，npm 为了你的账号安全考虑，每次登录账号都需要使用一次性密码验证自己，该密码会发送到你配置的电子邮件地址里。所以不论你是在网页端登录账号，还是通过命令行登录 npm 账号，都需要从邮箱收验证码。

如果要避免这一步额外的登录步骤，就需要启用双因素身份验证。

什么是双因素认证（2FA）

双因素认证也叫双重身份验证，简单来说就是使用额外的方式来验证你的身份（你的邮箱验证码属于第一重），比如说通过生物识别（指纹、人脸）或者是 有有效时间的一次性密码，具体的说明可以看官方文档介绍，这里我就不赘述了。

总之是 npm 官方为了你账号安全的考虑，毕竟如果一个包的使用人数多了后，万一被人爆破了密码删了你的包，受影响的人群还是挺多的。所以官方也是强烈建议注册后就立刻开启的。

开启 npm 双重认证的步骤

在账户设置页面的 "双重身份验证" 下，单击启用 2FA。

点击后会要求你输入 npm 账号的密码，然后进入到下一步操作
在 2FA 方法页面上，选择你要启用的方法

这里直接选择第一种方式，使用安全密钥，可以直接使用 apple 的 touchid 或者 windows hello 来验证。第二种方式是我过去用的，比较麻烦，需要下载额外的 app 然后查看基于时间的一次性验证码。

点击continue后会要求你为安全密钥提供一个名称：

点击Add security key后就会弹窗，问你是否使用触控 ID 登录：

使用指纹确认后，我们的密钥就添加到了 icloud 中，npm 提示你 2FA 开启成功，并让你保护恢复代码。

这样我们就启用了 2FA 验证，然后我们测试一下，退出登录，然后再执行登录，就会跳转到 2FA 的验证界面：

使用 2FA 登录 npm 发个新包

接着我们在终端中登录npm来尝试，为fengdu-utils增加一个getQueryParams函数：

/**
 * @description: 获取query参数
 * @param {*} url
 * @param {*} paramName
 * @return {*}
 */
function getQueryParams(url, paramName = null) {
  let queryParams = {}
  let queryString = url.split('?')[1]

  if (queryString) {
    let params = queryString.split('&')
    params.forEach((param) => {
      let [key, value] = param.split('=')
      queryParams[decodeURIComponent(key)] = decodeURIComponent(value)
    })
  }

  if (paramName) {
    return queryParams[paramName] || null
  }

  return queryParams
}

import { randomArray, getQueryParams } from './randomArray.js'
export { randomArray, getQueryParams }

export default {
  randomArray,
  getQueryParams
}

因为我们是发布一个新的包，所以需要修改一下包的版本号为 1.0.1

{
  "name": "fengdu-utils",
  "version": "1.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

然后我们再次执行npm login，等你键入回车后就会自动打开浏览器跳转到 2FA 页面，确认过指纹后就可以成功在终端中登录 npm 账号了，这样就免去了每次查看邮箱了，整体发包的体验就好了很多。

~/project/fengdu-utils npm publish
npm notice
npm notice 📦  fengdu-utils@1.0.1
npm notice Tarball Contents
npm notice 864B .vscode/settings.json
npm notice 288B index.js
npm notice 776B lib/index.js
npm notice 226B package.json
npm notice Tarball Details
npm notice name: fengdu-utils
npm notice version: 1.0.1
npm notice filename: fengdu-utils-1.0.1.tgz
npm notice package size: 988 B
npm notice unpacked size: 2.2 kB
npm notice shasum: ec30c22d8eaa08bf0e708b2d16ec67b2381f601e
npm notice integrity: sha512-6vLBp9d7ZqboV[...]4laSL4v3UJlzg==
npm notice total files: 4
npm notice
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ fengdu-utils@1.0.1

依此类推，以后每当我们需要加入新的工具函数时，就修改版本号，然后执行 npm publish 就行了，结合开启了 2FA 的 npm，发布迅速无比。

总结

以上就是一个从npm注册到发布自己的一个工具包的完整过程，希望各位读者也能尽快的拥有自己的包，助力自己敏捷开发，减少重复劳动。