使用webpack4搭建乙個基於Vue的元件庫

組內負責的幾個專案都有一些一樣的公共元件，所以就著手搭建了個公共元件開發腳手架，第一次開發 library，所以是參考著 iview 的配置來搭建的。記錄如何使用webpack4搭建乙個library的腳手架。webpack4 搭建 vue 專案

使用 webpack4，需要安裝 webpack 和 webpack-cli

yarn add webpack webpack-cli -d

然後就是書寫配置檔案。

我寫的 library 的目錄結構如下，僅供參考，主要是模仿iview的結構，其中部分配置參考了vue-cli的 webpack 配置檔案。

├─build │ build.js // 用於執行構建 │ check-versions.js // vue-cli 留下的，主要就是檢查npm版本和node版本 │ webpack.base.conf.js // 通用配置 │ webpack.dev.conf.js // 開發環境 │ webpack.dist.prod.conf.js // 用於生成library的** -- hbf.min.js │ webpack.prod.conf.js // 用於生成example檔案的打包**，這個其實是沒有必要的. │├─dist │ └─example // example生成的打包資料夾，可以通過githubpage來預覽，或者本地使用anywhere預覽 │ hbf.min.js // library 檔案 │├─example // example目錄 │ index.html │ main.js │├─lib │ │ index.js // 全量引入公共元件，並暴露出來，包含install方法可供vue引入使用該外掛程式 │ │ readme.md │ │ │ └─components // 公共元件 │├─package.json // 專案包依賴

更為具體資訊的可以到github倉庫閱覽。

為了更好的理解，先來了解下 webpack 編譯後的**。

經過webpack處理過的**通常都是如下所示

// webpack編譯後的**
/** @param  modules
*/;(function(modules) , // 作為結果返回.
}// 呼叫modules陣列的某個元素（型別為函式）
modules[moduleid].call(
module.exports,
module,
module.exports,
__webpack_require__
)return module.exports
}  return __webpack_require__(0)
})([
/** 省略了**， 該陣列的每一項代表乙個模組，實際是乙個函式，接受三個引數，module物件，module.exports物件，__webpack_require__函式 **/
])

webpack 編譯後的**的整體結構就是乙個iife函式，接受乙個modules: array引數。

對於模組處理，無論是es module的import還是commonjs的require都轉化為__webpack_require__這個函式來引入模組。

__webpack_require__函式，會從modules陣列的第乙個元素開始(moduleid 為 0，也就是入口檔案)，執行該模組（實為乙個函式）的邏輯，利用傳入的module.exports的資料型別為引用型別object，間接地給module.exports新增屬性。

return __webpack_require__(0)

從入口檔案開始，逐個引入依賴模組，最後返回入口模組的module.exports

此時這個編譯後的 js 檔案，是無法被其他模組所引用的，只在當前作用域內有效，webpack就提供了建立 library 的方式，就是在output裡定義library和librarytarget。使得構建完的 js 可以供其他模組引入使用。

對於作為乙個 library 使用的專案來說，output 選項需要設定 library

// webpack.dist.pord.conf.js output: ,

library可以是字串，也可以是物件，(物件僅限於librarytarget的值為umd的情況下使用)

output: ,
librarytarget: 'umd'
}

commonjs和commonjs2的區別。

commonjs規範就是定義了乙個exports物件，而nodejs在實現的時候，在commonjs規範的前提下做了一些擴充套件，定義了module.exports，從而也叫這種為commonjs2規範。

我們在引用別人的庫的時候，通常都是可以通過多種方法引入的，比如```

輸出

可以像使用其他 vue 外掛程式庫/元件庫一樣使用。

import hbf from 'hbf-public-components'
// 使用use方法觸發hbf的intall方法，註冊全部元件
vue.use(hbf)

如果是沒有匯出default變數，則使用另外一種方式全量引入

import * as hbf from 'hbf-public-components'

import  from 'hbf-public-components'

按需引用，如果 library 使用的是es2015 module規範，則不需要安裝任何外掛程式，webpack 會對其進行tree-shaking，去除未引用的**。

前面提過，webpack的tree-shaking是由uglylify外掛程式實現的，我在開發環境下，沒有啟用uglylify來壓縮**，所以檢視模組打包圖，會發現整個庫都被引入了，雖然我只引入了乙個元件。webpack4在生產環境下，才會進行tree-shaking，設定mode的值為production就會開啟生產環境下的優化。

如果是使用commonjs規範的 library 則需要乙個外掛程式支援，babel-plugin-import。該外掛程式是ant官方開發的。許多 ui 元件庫的按需引入也是依賴於這個外掛程式。

安裝yarn add babel-plugin-import -d

修改.babelrc檔案，

"plugins": [
["import", ]
],

其實如果對於乙個不是很穩定，需要一直迭代更新的公用元件庫來說，使用 npm 包的話，會比較不方便，經常更新的公共元件**可以使用git subtree（教程）來維護，可以等到一定地步之後，公共元件庫穩定下來之後再考慮發布乙個 npm 包。

而開發乙個元件庫，也可以使用 rollup.js 來搭腳手架，rollup.js預設使用的就是es2015 module，可以進行靜態分析，去除未引用的**，tree-shaking也是rollup.js先提出的。rollup相比較於webpack，更適合用於構建library，vue.js就是使用rollup構建的。webpack在**分割這方面比較有優勢，所以webpack相對來說比較適合構建應用程式，不過使用 webpack 構建 library 也是可以的。

這個專案也可以用做 webpack 構建 library 的通用腳手架。下次再嘗試rollup構建 library

有幫助的話，可以給個star的話就最好啦。有問題也可以聯絡我。

關於模組規範，以及 webpack，babel 是如何編譯轉換模組的文章

使用webpack4搭建乙個基於Vue的元件庫

webpack4配置乙個多頁面

webpack4 基本使用

手動搭建webpack4框架（二）

使用webpack4搭建乙個基於Vue的元件庫

webpack4配置乙個多頁面

webpack4 基本使用

手動搭建webpack4框架（二）

相關推薦