創建自己的library類庫包並使用webpack4.x打包發布到npm
我們在開發過程中，可能經常要使用第三方類庫，比如jquery、lodash等。我們通過npm，下載安裝完之后，就可以使用了，簡單方便。我們自己可以創建一個類庫，然后供其他人這樣安裝使用嗎？當然是可以的。
下面我們就來說說。
1. 創建自己的類庫
index.js
import numRef from './ref.json' // 此文件請查看源碼
const numberWord = () => {
const numToWord = (num) => {
let returnValue = _.reduce(numRef, (accum, ref) => {
return ref.num === num ? ref.word : accum
}, '')
return returnValue === '' ? '請輸入0-10中的某個整數' : returnValue
}
const wordToNum = (word) => {
let resultValue = _.reduce(numRef, (accum, ref) => {
return ref.word === word || word.toLowerCase() === ref.word.toLowerCase() ? ref.num : accum
}, -1)
return resultValue === -1 ? '請輸入0-10中正確的單詞...' : resultValue
}
return {
numToWord,
wordToNum
}
}
export default numberWord()
此類庫有兩個方法，數字和單詞互轉。
這里可以直接使用lodash中的方法，是因為我們在webpack配置中使用了webpack.ProvidePlugin插件，使其再被需要的時候才require進來.
2. webpack4構建打包
使用babel編譯js語法
安裝babel環境
npm i @babel/core @babel/preset-env @babel/polyfill @babel/plugin-transform-runtime -D
創建文件.babelrc,設置轉碼的規則和插件
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"modules": false
}]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": false,
"regenerator": false,
"useESModules": false
}
]
],
"comments": false
}
增加webpack配置文件webpack.config.js:
let path = require('path')
let webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'number-word.js', //打包之后生成的文件名，可以隨意寫。
library: 'numberWord', // 指定類庫名,主要用於直接引用的方式(比如使用script 標簽)
libraryExport: "default", // 對外暴露default屬性，就可以直接調用default里的屬性
globalObject: 'this', // 定義全局變量,兼容node和瀏覽器運行，避免出現"window is not defined"的情況
libraryTarget: 'umd' // 定義打包方式Universal Module Definition,同時支持在CommonJS、AMD和全局變量使用
},
mode: "production", // 告訴webpack使用production模式的內置優化,
module: {
rules: [{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
}]
},
plugins: [
new webpack.ProvidePlugin({ // ProvidePlugin 可以將模塊作為一個變量，被webpack在其他每個模塊中引用。只有你需要使用此變量的時候，這個模塊才會被 require 進來。
_: ['lodash']
})
],
externals: { // 從輸出的bundle中排除依賴
lodash: { // 可以在各模塊系統(Commonjs/Commonjs2/AMD)中通過'lodash'訪問，但在全局變量形式下用'_'訪問
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_' // 指向全局變量
}
}
}
其中，使用了loader工具babel-loader，對src中的js文件加載
npm i babel-loader -D
使用webpack打包
先安裝webpack 和它的cli
npm i webpack webpack-cli -D
之后，執行命令，靜候佳況
npm run build
按以上流程，自動在根目錄下生成了dist文件夾，並出現了一個number-word.js文件。
我以上的介紹的都是些簡單的使用。webpack還有很多可以優化的內容，以后繼續探討。
至此，我們自己的類庫包webpack-library-example已經出來了，接下來就是要上傳至NPM了。
3. 上傳至NPM
你可以上傳任何具有package.json文件的文件夾至NPM。幾個主要命令：
npm adduser
npm login
npm version <update_type>
npm publish
上傳之前，需要登陸。
如果沒有賬號，需要先注冊npm賬號，並驗證郵箱。
然后在終端使用命令npm login，輸入注冊時候的賬戶、密碼、郵箱，來登陸。（也可以直接使用命令npm adduser來注冊並登陸。）
上傳
前期工作做好，確定自己的類庫可以發布之后，使用npm publish來發布上傳包。成功之后，就可以在npmjs網站找到你剛上傳的包了。
更新
以后，如果需要上傳更新包的內容，流程是：
- 需要先更新版本號，
npm version <update_type> - 之后webpack構建
npm run build - 上傳
npm publish
需要更新版本編號，可以直接手動在package.json中更改version字段。當然，也可以使用命令
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
此命令，會在git commit中生成一條記錄，並標記tag。
解釋下以下三種：patch、minor、major。
目前node版本大都是使用語義化版本(semver)作為一個標准。
對於第一次發版"version": "1.0.0"，之后升級，使用對應的類型。
patch: 補丁發布，向后兼容的bug修復，增加第三個數字。1.0.1
minor: 輕微發布，向后兼容的新特性，將中間數字增加並將最后一位數重置為0。1.1.0
major: 重大發布，破壞向下兼容的變化，將第一個數字增加，並將后兩位數重置為0。2.0.0
上傳發布的時候可能出現的問題：
-
權限問題。需要使用正確的賬戶，密碼，郵箱登錄。
-
權限問題。cnpm淘寶鏡像不能發布npm包。所以，需要更改鏡像地址，
npm config set registry https://www.npmjs.com/ -
E403:包/版本重名的問題。 npm上的包，不允許重名，重版本號。所以，請先確認你將發布的包名字，是否已經在npm中存在。
4. 項目中使用
瀏覽器
1. 加載 Using Script Tag
<script src="//unpkg.com/lodash"></script>
<script src="//unpkg.com/webpack-library-example"></script>
2. 使用 Usage In Web
numberWord.version
numberWord.numToWord(6)
numberWord.wordToNum('five')
NODE
1. 安裝 Using npm:
npm install webpack-library-example --save-dev
2. 使用 Usage In Node.js
require('lodash')
var webpackNumber = require('webpack-library-example')
webpackNumber.numToWord(1)
webpackNumber.wordToNum('two')
至此，創建，打包，發布，使用，都有了。如果還想繼續深入完善，需要考慮代碼測試，覆蓋率測試，還可以考慮自動化構建，持續集成CI。
請查看源碼:https://github.com/weiqinl/webpack-library-example
NPM發布的包:https://www.npmjs.com/package/webpack-library-example
參考
[完]