从0到1发布一个npm包

从0到1发布一个npm包

author: @TiffanysBear

最近在项目业务中有遇到一些问题，一些通用的方法或者封装的模块在PC、WAP甚至是APP中都需要使用，但是对于业务的PC、WAP、APP往往是不同的业务、不同的代码库中，尽管已经将公用的组件和方法抽离到各自公共common中，但是各个大业务大方向上的公用封装依然不能满足需求。

比如一个计算文档类型大小的方法，可能都同时存在于各个业务的common中，假设是有3处代码库中均有；如果此时的需求是将文档类型或者大小的方法进行一些修改，增加一种文档类型或者减少一种文档类型，那咱们是否是需要去共同修改上面的3处方法。这样做，很不利于代码的维护，浪费人力，增加了代码工作量。

那么，如何做到管理一些公共依赖的基础模块代码呢？这时候，封装发布一个npm包进行统一管理就是一个很好的办法了。

先po一下我在写这篇文章时，根据以下的步骤发布的一个简单封装的npm包以及github地址，大家可以先看：

npm包：page-performance-monitor

github地址：page-performance-monitor，欢迎 star、issue

下面，就从0开始讲起，如何从0到1发布一个npm包。先介绍一下什么是npm~

npm

npm 是JavaScript 世界的包管理工具，并且是Node.js 平台的默认包管理工具。通过npm 可以安装、共享、分发代码，管理项目依赖关系。

官网地址

比如有一些非常通用的公用方法，抽象封装，剔除一些冗余的业务需求，可以封装在一个npm包中，提供给相应的多个业务去使用。

那么接下来就列举一下封装一个简单的封装步骤；

发布步骤

以我之前的博客中列举的页面性能监控工具performance为例，具体的performance介绍可以点击链接，做一个简单的封装，满足基本的业务上的打点统计需求即可；后面也会讲到后续如何去封装一个高质量的npm包，比如加上一些example、测试test、完善README.md等，逐步去完善。大概是有以下几个步骤：

1、新建项目，准备需要发布的代码

2、准备package.json

3、注册npm账号、并登录

4、发布

其实发布的过程并不难，要发布一个好的质量高的npm包往往是取决于要封装的代码、以及对代码单测覆盖、demo案例、README介绍等

准备项目：

开始准备的步骤，从一个最基础的项目新建开始，都是在Mac的Linux环境上进行：

// 新建项目文件夹
 mkdir page-performance
 
 // 初始化npm，初始化package.json
 npm init
 
 // 准备好封装代码
 // 一般源码是放在src，通过其他打包工具生成的一般是在dist目录或者build目录
 mkdir src
 
 // 可以将自己需要的代码往src中添加了
 // 假设我们只需要发布一个index.js就好
 // ......

发布一个最简单的npm包：

1、先去官网注册一个账号，填写好账号、密码、邮箱

2、然后登录npm账号 npm login，如果你们公司有自己的默认npm仓库或者使用的淘宝镜像，注意需要指定一下仓库地址；npm login --registry=https://registry.npmjs.org

# 会依次让你输入用户名、密码、和邮箱
Username:
Password:
Email: (this IS public)

3、发布包 npm publish --registry=https://registry.npmjs.org

会提示+ page-performance-monitor@1.0.0 你的包名字和版本，那么说明就发布好了。

我在发布的时候遇到了两个小问题，记录一下，如果你们也有相同的问题，可以使用下面的解决办法：

1). 提示 publish Failed PUT 403

you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : page-performance-monitor

之前登录的邮箱需要验证，去注册邮箱中找到npm发的邮件，点击验证一下就行.

2）第二个问题是：You do not have permission to publish "page-performance". Are you logged in as the correct user? : page-performance

提示是说你没有权限发布这个包，其实是因为你的这个包名字和已有的重复了，需要在 package.json 里面换一个包名就行。

到这里，一个简单的npm包就封装好了，如何确认自己的包确认好了呢？去官网的搜索框输入你的包名搜一下，找到你的就ok啦~

到这步，你就会发布一个简单的npm包啦，如果只是一个很小的需求的化，就完全够用了；但是如果想要发布一个质量好有各种小标签logo的，那么就需要如下的步骤进行一下优化。

优化npm包：

1、代码环境依赖-线上线下环境

如果项目在线上线下使用的配置都不同的化，可以通过命令输入的不同，区分是debug模式还是生产production模式。

process.env.NODE_ENV === 'production'

在相应的package.json中的配置中，就需要加上 npm run build --mode production 来进行区分。

2、配置打包编译

好的一个npm包，往往需要不同的产出模式，比如利于script标签使用的iife模式，或者是采用amd、cmd等的打包方式进行export；或者需要采用babel进行转义，增加polyfill；或者你需要增加demo，为demo输出不同的样例，都需要使用配置打包编译。

目前常见的打包编译工具有webpack、rollup、fis、gulp等工具，相信也非常熟悉了；因为我的这个只是个简单的检测页面性能的工具方法，采用较为简单的适合工具库类型打包的rollup进行打包编译。

rollup.config.js配置如下：

/**
 * @file: rollup.config.js
 * @author: Tiffany
 */
// Rollup plugins
import resolve from 'rollup-plugin-node-resolve';
import commonjs from '@baidu/rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify-es';
export default [
    {
        input: 'src/index.js',
        output: {
            file: 'dist/index.js',
            format: 'umd',
            name: 'Perf',
            legacy: true,
            strict: false,
            sourceMap: true
        },
        plugins: [
            resolve(),
            commonjs(),
            babel({
                runtimeHelpers: true,
                exclude: 'node_modules/**'
            }),
            uglify()
        ]
    }
];

配合babel的配置，如下：

{
    "presets": [
        [
            "latest",
            {
                "es2015": {
                    "modules": false
                }
            }
        ]
    ],
    "plugins": [
        "external-helpers"
    ]
}

然后就可以根据自己的需求，选择打包format的模式，产出自己需要的结果。大家也可以根据自己的项目需求、大小等，进行配置。

3、增加单测

现在前端单测的库有很多，在这里就不再赘述；在这里采用的是 mocha + chai 断言库，因为这个库是运行在浏览器端，需要依赖于 JSDOM 中的 window 对象，因为采用了 JSDOM 库来实现 DOM 对象等的构建以及全局变量 window 的加入，以下是具体的配置：

// test/index.test.js
/**
 * @file: index.test.js
 * @author: zhoufang04
 * @description: mocha + chai test
 */
const expect = require('chai').expect;
const {JSDOM} = require('jsdom');
const perf = require('../dist/index.js');
const {window} = new JSDOM(`<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <meta name="author" content="test">
        <title>performance test</title>
    </head>
    <body>
        <div id="values"></div>
        <div id="app"></div>
    </body>
    </html>`);
global.window = window;
describe('页面性能测试', function () {
    it('加载完成返回数据为对象', function () {
        expect(perf.getPerformanceTiming()).to.be.an('object');
    });
    it('返回耗时', function () {
        expect(perf.getPerformanceTiming().duration).to.be.an('number');
    });
    it('返回ttfb耗时', function () {
        expect(perf.getPerformanceTiming().ttfb).to.be.an('number');
    });
    it('返回requestTime耗时', function () {
        expect(perf.getPerformanceTiming().requestTime).to.be.an('number');
    });
});

运行node ./node_modules/mocha/bin/mocha，效果如下图：

需要注意的是，本地node版本太低可能会导致mocha会有报错，这时候采用 nvm 升级一下node版本，再次运行就行。

4、增加Example

增加example文件夹，里面可以通过对这个包的使用，增加一些Demo案例，让别人能更好的知道怎么使用这个库。

5、完善README.md

在项目文件中增加README.md，提供使用方法、demo、注意事项等信息，方便别人使用，更容易让人明白。

可以看下在 page-performance-monitor 这个库中，我这边写的README.md，点击链接可查看

总结

上面的步骤就是如何从0到1封装的一个npm包，可以封装一个简单的适于业务快速开发的，也可以封装一个高质量封装一起使用；可以根据自己的业务需求、时间成本等自行选择。