發佈本身的npm包

1、首先要有一個需求~

前一段時間正好寫到一個小的demo工具。

需求是這樣的：
項目愈來愈大的狀況下，使用fis每次編譯的時間比較長，須要將編譯過程改爲增量編譯，讓每次編譯都是去編譯變化的活動。因爲編譯工做是fis完成的，最終須要我作的去實現只是一個獲取發生變化的文件的工具方法。

在要作這個小工具以後，咱們就能夠把它作成一個簡單npm包，來實現下npm的發佈過程

先展現下需求的具體實現

思路是：既然要獲取發生變化的文件夾，那麼必定要知道原先文件夾合集，和當前文件夾合集，並比較下他們的md5值就能夠判斷出發生變化的文件夾，篩選出來其中發生變化的傳遞給編譯工具就完成啦

 

 1 // 須要用的npm包
 2 import fs from 'fs'
 3 import glob from 'glob'
 4 import dirsum from 'dirsum'
 5 
 6 /**
 7  * 文件夾路徑 --> 文件夾md5
 8  * @param {String} dirPath 文件夾路徑
 9  * @return {Promise} 
10  */
11 function dirsum_md5 (dirPath) {
12     return new Promise(function (resolve, reject) {
13         dirsum.digest(dirPath, 'md5', function (err, hashes) {
14             resolve(err ? '' : hashes.hash)
15         })
16     })
17 }
18 
19 /**
20  * 獲取glob錨點路徑 對應的 文件夾對象合集
21  * @param {String} anchor 錨點文件的glob路徑
22  * @return {Array} 文件夾對象的合集
23  */
24 export function toGetProjectDirs (anchor = 'src/**/build.this'){
25     // 錨點文件的文件名
26     let anchor_file_name = anchor.split('/').slice(-1);
27     return Promise.all(glob.sync(anchor).map(async function (projectFile) {
28         // 錨點文件 --> 文件夾路徑
29         let path = projectFile.match('^(.*?)'+anchor_file_name)[1]
30         // 文件夾路徑 --> 文件夾md5
31         let md5 = await dirsum_md5(path)
32         // 封裝成對象
33         return {path,md5}
34     }))
35 }
36 
37 /**
38  * 比較文件夾變化
39  * @param {Array} preDirs 舊文件夾對象的合集
40  * @param {Array} nowDirs 新文件夾對象的合集
41  * @return {Array} 注意：返回的是新文件夾數組的子集
42  */
43 export function toCompareChange (preDirs,nowDirs){
44     return nowDirs.filter(function(nowDir){
45         let dirs = preDirs.filter(function(preDir){
46             return preDir.path === nowDir.path
47         })
48         return nowDir.md5 !== (dirs.length > 0 ? dirs[0].md5 : '')
49     })
50 }

有了上面的代碼就能夠實現當前需求，接下來要作的是把上面的代碼發佈出去，讓其餘人均可以使用

2、而後一些準備工做

想要發佈npm，首先要有一個npm帳號

由於你的包是要放在npm上的，因此，沒有npm的帳號，根本什麼活都幹不了。
在npm上註冊一個帳號是很簡單的，隨便填一下用戶名密碼郵箱，而後人家就會發個郵件給你，而後就註冊成功了。

而後你就可使用npm publish來發布npm包了，固然首次發佈的時候要登陸。

輸入完用戶名，密碼，郵箱後沒有錯誤信息就完成了。

$ npm adduser
Username: your name
Password: your password
Email: (this IS public) your email

　　查詢或者登錄別的用戶命令

$ npm whoami
$ npm login

 

npm init

建立一個文件夾，進入以後執行npm init，以後這個文件夾就是你要發佈工具的文件夾了。

而後把剛纔寫好的代碼放到文件夾中，這樣基本的準備工做就作好了

記得npm install使用到的包

還有就是記得寫README.md文件，要否則別人根本不知道你的工具是幹什麼的和如何去使用。

3、開始發佈啦

打包代碼

發佈的要先對代碼進行打包一下，固然你也能夠忽略這一步，直接將代碼發佈出去。
可是！！如今的前端模塊規範是愈來愈多了，因此若是不對本身的代碼進行處理的話，別人那道基本是用不了的。

對於npm包的打包，這裏推薦使用rollup

理由嗎，就是簡單、高效、全面。

舉個簡單的rollup配置文件的例子，執行rollup -c就能夠實現編譯。

export default {
    input: 'src/index.js',
    plugins: [ 
      
    resolve({
        jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
        // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
        main: true,  // Default: true 
        browser: true // Default: false
    }),
    commonjs({
    }),
    json(),
    babel({
        exclude: 'node_modules/**',  // 排除node_modules 下的文件
        runtimeHelpers: true
    }),
    // replace({
    //     include: 'src/index.js', // 指定可使用變量的文件路徑
    //     exclude: 'node_modules/**',
    //     ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    //     HOST: JSON.stringify('http://111/111')
    // })
   ],
    output: [{
      file: 'dist/index.js',
      name:'SongPackage',
      format: 'umd'
    },{
      file: 'dist/index.es.js',
      format: 'es'
    },{
      file: 'dist/index.amd.js',
      format: 'amd'
    },{
      file: 'dist/index.cjs.js',
      format: 'cjs'
    }]
};

這樣就會把經常使用的模塊規範都編譯出來了

下面咱們看下各個模塊規範編譯出來的效果是

// 假設源文件代碼
export default {};

// AMD
define(function () { 'use strict';
  var index = {};
  return index;
});

// CommonJS
'use strict';
var index = {};
module.exports = index;

// ES6
var index = {};
export default index;

// UMD 通用 閉包
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.SongPackage = factory());
}(this, (function () { 'use strict';
var index = {};
return index;
})));

默承認以設置指向UMD，用戶也能夠根據本身的項目選擇其餘的引入。

終於進入要發佈了

module開發完畢後，剩下的就是發佈啦，進入項目根目錄，輸入命令。

首先要設置一個版本號

npm社區版本號規則採用的是semver（語義化版本），主要規則版本格式：主版本號.次版本號.修訂號，版本號遞增規則以下：

主版本號：當你作了不兼容的 API 修改，
次版本號：當你作了向下兼容的功能性新增，
修訂號：當你作了向下兼容的問題修正。
先行版本號及版本編譯信息能夠加到「主版本號.次版本號.修訂號」的後面，做爲延伸。

$ npm publish

這裏有時候會遇到幾個問題

問題1：

npm ERR! no_perms Private mode enable, only admin can publish this module:

這裏注意的是由於國內網絡問題，許多小夥伴把npm的鏡像代理到淘寶或者別的地方了，這裏要設置回原來的鏡像。

$ npm config set registry=http://registry.npmjs.org

問題2：

npm ERR! you do not have permission to publish "your module name". Are you logged in as the correct user?

　　提示沒有權限，其實就是你的module名在npm上已經被佔用啦，這時候你就去須要去npm搜索你的模塊名稱，若是搜索不到，就能夠用，而且把package.json裏的name修改過來，從新npm publish，看到以下信息就表示安裝完成了，songpackage就是個人模塊名。

+ songpackage@0.1.0

 

更新版本，發佈

$ npm version 0.1.1
$ npm publish