開發和維護我的開源項目之npm發佈

開發和維護我的開源項目之npm發佈

項目的引入

開始編碼以前，項目如何被引入使用也須要考慮清楚。我的以爲使用npm包的方式引入是最佳選擇：項目徹底沒有bug的可能性很是小，引入的打包後的結果基本沒法調試，只能提issues或者另開環境，流程十分麻煩也不方便bug回溯；讓使用者可以直接使用源碼進行調試，就顯得很酸爽了。

另外若是項目包含了不少的輸出，實際應用可能只須要其中部分輸出，引入所有的代碼會帶來冗餘（如：Lodash）。怎麼按需引入，下文pakeage.json會講到。

此外webpack提供了UMD(Universal Module Definition)的配置：

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd'
  }
};

打包的輸出：

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_; // 此模塊返回值，是入口 chunk 返回的值
});

這樣項目的引入方式基本能知足全部狀況了。詳細webpack配置點我。

npm發佈

發佈流程：

1. npm init //初始化項目，名字版本等信息，後面能夠改
2. 註冊npm賬號
3. npm login
4. npm publish
5. npm unpublish 官方不推薦使用。

pagekage.json

main

模塊的入口，例如：模塊名字foo，reuqire('foo')，引入的文件路徑（相對於當前包的根目錄）由main字段定義，打包輸出的結果爲dist/index.js，配置即應該是：

{
 "main":"dist/index.js"
}

peerDependencies

表示預記宿主會安裝的依賴。例如，安裝babel-loader時，提示：

又好比開發一個vue的組件，已知宿主會必定會安裝：

"peerDependencies": {
    "vue": "^2.5.0"
  }

module（非標準字段）

該配置指向打包前的源碼入口。
wepack在構建項目的時候，若是發現了這個字段，會首先使用這個字段指向的文件。
除了源碼更好調試外，還有一個優勢Tree Shaking優化即按需引入。聊聊 package.json 文件中的 module 字段

{
 "main":"src/index.js" //源文件目錄爲src
}

其餘字段詳細介紹點我看官方文檔
package.json 非官方字段集合

其餘

.npmignore

有些文件默認不會發布，有些文件是強制發佈，具體請看官方文檔，保證明時性。

問題1

若是npm login報錯以下：

npm ERR! code E409
npm ERR! Conflict

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Louis\AppData\Roaming\npm-cache\_logs\2019-01-23T06_55_37_738Z-debug.log

有多是你當前使用的是淘寶的鏡像，嘗試

npm config set registry https://registry.npmjs.org/

再進行npm login

總結

須要構建的項目，採用npm來使用是開發的不二之選。