如何打造自己的npm庫

litong534發表於2018-03-02
NPM

準備工作

node與npm肯定是要有的，這些略過不談

操作流程

程式碼規範

首先去github新建一個倉庫，然後clone到本地，我們的主要工作環境就在這裡啦~

如何打造自己的npm庫

然後去npm註冊一個賬號。傳送門

註冊好之後我們輸入npm login進行登入操作，一定要記得在之前驗證郵箱，否則後面無法釋出。

這裡是我們的原始碼，與之前不同的是，我們需要做一些處理。

如何打造自己的npm庫

(function (global, name, factory) {
    "use strict";

    if (typeof exports === 'object' && typeof module !== 'undefined') {
        module.exports = factory();
    } else if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global[name] = factory.apply(this);
    }
}(this, "專案名稱", function () {
    // 邏輯編寫
}));
複製程式碼

這裡的操作主要是用於適配開發環境，簡單來說如果環境支援commonJS規範的話，將我們的程式碼以module.exports方式匯出，amd和cmd規範也定義了相應匯出方式，最後的條件是我們直接使用script標籤方式引入的話，在window物件上定義我們的程式碼，就可以直接訪問對應專案名稱的window成員變數來呼叫我們的程式碼邏輯了~

舉例：我的js庫最終返回的物件是MyModule，那麼專案名稱這裡我們寫MyModule，引入到環境中就可以使用window.MyModule來引用我們的物件了。

這時我們npm init一下，會發現和之前相比多了很多選項，我們按照提示填好就好，之後會生成package.json檔案。

程式碼壓縮與混淆

接下來把我們的檔案放到根資料夾中的src目錄下，為了方便開發中使用，我們需要使用打包工具進行壓縮混淆，我參考了其他模組的壓縮打包方式，所以選用了gulp執行壓縮程式碼的工作。

根目錄新建gulpfile.js檔案，依次安裝 gulp gulp-uglify gulp-rename包，在gulp.js檔案中輸入以下程式碼

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('default', function () {
  gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('dist/'))
});
複製程式碼

之後輸入"gulp"命令，我們會發現程式碼被成功打包到了dist資料夾中。這時我們的資料夾中是這樣的結構

如何打造自己的npm庫

收尾工作

對了，我們還需要編寫LISENCE檔案，這個我是手動建立的，這個檔案是開發者的開源宣告，指定了庫的適用範圍，我選用的是MIT，具體開源宣告的範圍請參考這裡。

Publish time~！

好了，工作都完成了，我們嘗試npm publish一下，如果提示成功說明我們自己的庫已經被提交到npm裡了，我們可以嘗試在其他專案中npm install 我們自己的包，然後盡情使用吧~

踩坑提示

首先是之前說到的，我們需要驗證郵箱，這一步容易遺忘，因為npm官網並不會單獨給一個頁面提示你驗證，而是隻在首頁有個很窄的通知欄。

然後就是我們publish之前要檢視package.json檔案裡的main指定的路徑，一定要寫成dist/xxx.js或者dist/xxx.min.js，否則會報找不到依賴的錯誤。

最後，我們如果要更新程式碼的話，記得在package.json中更新我們的版本號，如果版本號相同的話會發布失敗。

擴充套件

目前Github已經整合了持續整合服務travis，我們只需要在專案中新增.travis.yml檔案，在下一次push之後，travis就會定時執行npm test來測試你的專案（該專案中，使用mocha進行測試管理），並且會在測試失敗的時候通知到你，你也可以把專案當前的狀態顯示在README.md中，進而很容易知道專案當前狀態。

這裡要提一下，我們的程式碼如果想做得更加完善，第一是寫測試用例，使用mocha來完成（因為我沒接觸過，所以暫時沒有寫用例，大家不要學我QAQ）。第二點就是要寫readme，這個檔案是作為文件展示在github倉庫首頁和npm的程式碼庫展示頁的，方便大家的使用和查閱。

最後我們用git工具把程式碼提交到倉庫一份，方便感興趣的人提交issue和幫忙fork程式碼，一起完善我們的程式碼~

結語

本人的以上經歷以及部分程式碼與引用參考了 釋出專案到npm

本人提交的庫部分程式碼參考了15個常用的javascript正規表示式

順便在最後安利一下我的github、我的個人部落格、我提交的正則庫

希望這篇文章可以給大家提供有用的東西~

相關文章