<冰山之下的疯狂，读《克苏鲁神话合集》骑砍战团的统一卡拉迪亚之旅>

NPM发包流程与技巧

#### 前言
　　很多年前，面向Google编程是一种调侃。现在，对前端来说，面向Github编程基本成现实。这么说，在Node.js的帮助下，前端项目，基本是必须依赖Github某个包，假设禁止使用Github上开源过的一切代码（除浏览器），项目怕都是跑不起来。当然，从现实结论反推条件原由，说前端开发离不开Github是不太恰当的，前端开发真正离不开的是“开源”，Github正好是主流的开源容器。

NPM是Node.js默认的包管理工具，两者差不多同时出现的（Node.js是2009年发布，NPM是2010年发布）。NPM初始目的用来下载Github上开源包、管理包与包之间依赖关系。

初次使用NPM的时候，Cifer就对node_modules里数量重多、占用空间多不感冒（那时还是树状结构，每个包的node_modules都有它所依赖的包的备份），现在虽然是扁平结构，但依然不够精简。

今天从一个NPM发包实例来看待这个问题。

#### 注册Github与NPM
　　注册<a href="https://github.com/" target="_blank">Github</a>是用来对外存放你的开源代码的，方便其他人查看与修改。推荐使用，但理论上说，是非必须的。
　　注册<a href="https://npmjs.com/" target="_blank">NPM</a>，用来使用发包认证与提醒的。
#### 初始化包
　　在Github上，我们先创建一个空开源项目，举例Cifer写的这个实例叫date-format-helper。
本地某个目录中，克隆这个空项目。
```
git clone https://github.com/cifergit/date-format-helper.git
```
　　在本地date-format-helper项目中执行初始化。
```
npm init
```
　　其中会提示让输入一些信息便于生成package.json
　　name: 包名，单词间中划线分隔（常见方式），包名除了可以概括包的功能外，还应该提前在NPM官网搜索避免同名包。
　　version: 版本号，默认是0.0.1，不过建议改成0.0.1-beta.0，表示初次发布，可能存在问题，下个版本升级成0.0.1-beta.1，直到确定没有问题后，再升级成为第一个稳定版0.0.1。
　　main: 入口文件，比如index.js，用来export包。
以上3个必填信息是非常重要的，其他次要信息自行视情况输入。

#### 使用rollup对包的入口封装
　　以date-format-helper为实例，该包是对Date进行简单的格式转换，主要是导出一个dateFormat方法。
```javascript
export {
	dateFormat
}
```
　　这样，在Node.js默认情况下，用户可以使用CommonJs方式导入：
```javascript
const { dateFormat } = require('format-date-helper')
```
　　如果用户使用了Webpack的话，还可以使用ES Module的方式导入：
```javascript
import { dateFormat } from 'format-date-helper'
```

问题来了，如果用户不使用Webpack之类的打包工具，甚至要在IE下使用怎么办呢？所以需要对我们的包进行一个简单的封装。

这里使用的是<a href="https://rollupjs.org/guide/en/" target="_blank">Rollup</a>
```
npm install --global rollup
rollup src/module.js --file index.js --format umd --name 'date-format-helper'
```
　　首先全局安装rollup，主要看第二个命令。
　　基于项目的原代码src/module.js，以UMD的标准生成一个位于项目根目录的入口文件index.js，最后在window全局变量中以 date-format-helper命名。
　　之后例可以本地项目中看到生成的index.js了，它其实就是包装了一下src/module.js的代码。
```javasciprt
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['date-format-helper'] = {}));
}(this, (function (exports) { 'use strict';

function dateFormat(props) {
		// my code
	}

exports.dateFormat = dateFormat;
	Object.defineProperty(exports, '__esModule', { value: true });
})));
```
#### 发包
Cifer使用的发布流程如下：
　　A.基于master分支，切出某个功能分支function-branch，进行开发。
　　B.function-branch在本地npm link的方式实测无问题后。使用这个分支，发布一个beta版至NPM中，命名规则：比如现在版本是1.2.3，那么下个小版本的beta版本号是1.2.4-beta.0。注意，不能直接使用npm publish的方式发布beta版本！！！因为会使npm install 包名的用户下载到beta版本。注：发包前需先npm login。
　　C.当beta版本有问题时，尝试修改function-branch分支后，继续发布下一个beta版本。直到没有问题了，把function-branch分支合并至master分支，并新建立一个tag，以版本号命名，比如1.2.4-beta.X的稳定版tag就是1.2.4。
　　D.基于这个tag，再进行npm publish发布正式包1.2.4,并把tag push至Github进行“留存”。

所以在熟知以上流程的基础上，才能如下发包：
```
npm publish
```

##### B步提到不能npm publish发beta版本？
　　查看包最新版本：
```
npm view date-format-helper
```
　　其实latest就是最新版本，因为使用npm publish发的包，都会发到latest上，那么不明所以的用户就会下载到它，造成问题。
更安全的做法如下，假设我正在开发的版本号是0.0.2-beta.0
```
npm publish --tag beta
```

虽然我们发布了一个包叫date-format-helper@0.0.2-beta.0，但用户npm install date-format-helper是不会安装beta版本的，除用户手动npm install date-format-helper@0.0.2-beta.0才会安装。
　　此时包是：
beta: 0.0.2-beta.0   
latest: 0.0.1。
所有的包版本是：
```
npm view date-format-helper versions
```
　　[ '0.0.1-beta.1', '0.0.1', '0.0.2-beta.0' ]
　　如果beta版本没有问题，甚至可以把它设为latest:
```
npm dist-tag add date-format-helper@0.0.2-beta.0 latest
```
　　个人不推荐这么做，一般情况下，beta版本就不应该给用户使用，而应该把0.0.2-beta.0正式更名为0.0.2之后，发布稳定版才是正常流程。当然不排除想把所有用户当成小白鼠，一直0.0.2-beta.x升级上去，直到用户没有报问题了，再改成0.0.2的特殊需求。

注：这里我会撤回0.0.2-beta.0，所以后面查看不到0.0.2-beta.0,撤回的原因是不应该用户看到太多的测试包。

##### NPM可以撤回包？
　　可以，本人尝试撤回了beta版与latest，前提是这个包发布时间不超过24小时：
```
npm unpublish date-format-helper@0.0.1-beta.0
```
　　这个date-format-helper@0.0.1-beta.0，我是以npm publish发布的，结果撤回后付出代价，那就是24小时以内，不可以再发本包任何版本了。个人认为，如果24小时以内，不能再发date-format-helper@0.0.1-beta.0这个同版本的号，是为了防止用户下载到不同内容的同版本包（其实24小时之后也不能发这个同版本包了）。但不允许发任何包，应该就是一种惩罚，让作者不要顺便撤回latest。
　　但本人实测，如果发包是非latest，那么撤回该包没有任何惩罚！
　　虽然可以撤回包，但如果刚刚发布的正式版出大问题了且又急着上线，应该做的不是立刻撤回包或者立即发更新的包，而是先把latest设为上一个稳定版本，然后发beta版本，测试beta版本正常后，再发下一个正式版本，最后才是撤回那个有错的正式包（避免24小时问题，同时避免任何人下载到它）。

##### NPM包如何能更小
　　https://github.com/cifergit/date-format-helper
　　以上述为例，只是一个函数，加上各种有必要存在的文件，打包之后就有3K。其实这里只需要打包好的入口文件index.js即可，版本号带在文件夹中，其他的必备文件存放在Github上但无需下载，除非npm install 时指定是 dev调试才全部下载。如何一来，可以节省数倍至数十倍。
　　个人想法，欢迎吐糟。

如果觉得有帮忙，您可以在本页底部留言。

NPM发包流程与技巧

全部留言

我要留言