如何打造本身的npm庫

準備工做

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

操做流程

代碼規範

首先去github新建一個倉庫，而後clone到本地，咱們的主要工做環境就在這裏啦~

而後去npm註冊一個帳號。傳送門

註冊好以後咱們輸入npm login進行登陸操做，必定要記得在以前驗證郵箱，不然後面沒法發佈。

這裏是咱們的源代碼，與以前不一樣的是，咱們須要作一些處理。

(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文件夾中。這時咱們的文件夾中是這樣的結構

收尾工做

對了，咱們還須要編寫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、個人我的博客、我提交的正則庫

但願這篇文章能夠給你們提供有用的東西~