從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等，逐步去完善。大概是有如下幾個步驟：

一、新建項目，準備須要發佈的代碼
二、準備package.json
三、註冊npm帳號、並登陸
四、發佈

其實發布的過程並不難，要發佈一個好的質量高的npm包每每是取決於要封裝的代碼、以及對代碼單測覆蓋、demo案例、README介紹等

準備項目：

開始準備的步驟，從一個最基礎的項目新建開始，都是在Mac的Linux環境上進行：

// 新建項目文件夾
 mkdir page-performance
 
 // 初始化npm，初始化package.json
 npm init
 
 // 準備好封裝代碼
 // 通常源碼是放在src，經過其餘打包工具生成的通常是在dist目錄或者build目錄
 mkdir src
 
 // 能夠將本身須要的代碼往src中添加了
 // 假設咱們只須要發佈一個index.js就好
 // ......
複製代碼

發佈一個最簡單的npm包：

一、先去官網註冊一個帳號，填寫好帳號、密碼、郵箱
二、而後登陸npm帳號 npm login，若是大家公司有本身的默認npm倉庫或者使用的淘寶鏡像，注意須要指定一下倉庫地址；npm login --registry=https://registry.npmjs.org

# 會依次讓你輸入用戶名、密碼、和郵箱
Username:  
Password:
Email: (this IS public) 
複製代碼

三、發佈包 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: 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包：

一、代碼環境依賴-線上線下環境

若是項目在線上線下使用的配置都不一樣的化，能夠經過命令輸入的不一樣，區分是debug模式仍是生產production模式。

process.env.NODE_ENV === 'production'

在相應的package.json中的配置中，就須要加上 npm run build --mode production 來進行區分。

二、配置打包編譯

好的一個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的模式，產出本身須要的結果。你們也能夠根據本身的項目需求、大小等，進行配置。

三、增長單測

如今前端單測的庫有不少，在這裏就再也不贅述；在這裏採用的是 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版本，再次運行就行。

四、增長Example

增長example文件夾，裏面能夠經過對這個包的使用，增長一些Demo案例，讓別人能更好的知道怎麼使用這個庫。

五、完善README.md

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

能夠看下在 page-performance-monitor 這個庫中，我這邊寫的README.md，點擊連接可查看

總結

上面的步驟就是如何從0到1封裝的一個npm包，能夠封裝一個簡單的適於業務快速開發的，也能夠封裝一個高質量封裝一塊兒使用；能夠根據本身的業務需求、時間成本等自行選擇。