使用webpack模塊給Library打包原理及實現

之前一篇文章分析了Webpack打包JS模塊的基本原理，所介紹的案例是最常見的一種情況，即多個JS模塊和一個入口模塊，打包成一個bundle文件，可以直接被瀏覽器或者其它JavaScript引擎執行，相當于直接編譯生成一個完整的可執行的文件。不過還有一種很常見的情況，就是我們要構建發布一個JavaScript的庫，比如你在npm社區發布自己的庫，這時Webpack就需要相應的配置，編譯生成的代碼也會略有不同。

和之前一篇文章一樣，本文主要分析的是Webpack的生成代碼，并結合它來說明編譯庫時Webpack那些關于library的配置選項的具體作用，相應的官方文檔在這里。

編寫JS的庫

我們還是從簡單的案例開始，我們隨便編寫一個簡單的庫util.js：

提供了兩個函數，當然它們之間毫無關系，也實際上沒有任何卵用，純粹是僅供教學參考。。

接下來寫Webpack的配置：

但僅僅這樣是不夠的，這樣輸出的文件就是一個立即執行的函數，最后會返回util.js的exports，參照上一篇文章中分析，最后生成的bundle代碼結構大致是這樣的：

它如果執行完，那就結束了，將util.js的export部分返回而已，而我們需要的是將這個返回值交給編譯后的文件的module.export，這樣編譯后的文件就成了一個可以被別人import的庫。所以我們希望得到的編譯文件應該是這樣的：

要得到這樣的結果，Webpack配置output部分需要加入library信息：

這里最重要的就是libraryTarget，我們現在采用commonjs2的格式，就會得到上面的編譯結果，也就是說Webpack會library把最后的輸出以CommonJS的形式export出來，這樣就實現了一個庫的發布。

其它發布格式

除了commonjs2，libraryTarget還有其它選項：

var (默認值，發布為全局變量)
commonjs
commonjs2
amd
umd

使用不同的選項，編譯出來的文件就能夠在不同JavaScript執行環境中使用。在這里我們直接看萬金油umd格式的輸出是怎么樣的：

比之前的commonjs2的情況要復雜得多，因為它需要處理各種不同的case，但其實后面的部分都是一樣的，最重要的就是最前面的幾行，這是umd模塊的標準寫法。它運行傳入的factory函數，實際上就是加載模塊的函數，然后把返回的結果根據不同的運行環境交給相應的對象。例如var，那就會把結果設置為一個全局變量，這用于瀏覽器通過<script>標簽直接導入該JS文件；如果是CommonJS，它則交給exports對象；如果是AMD環境，它也是用標準的AMD的寫法。這樣這個發布出來的JS庫就可以在任意的環境中都能被其他人使用。

targetExport控制輸出內容

如果用umd格式打包，可能會有一個坑需要注意，如果你的庫的源代碼是用ES6格式export default來輸出的，正如上面的例子util.js，你直接把編譯后的JS庫文件放到瀏覽器中使用，可以是<script>，或者RequireJS，可能得不到你想要的結果。這是因為你的JS文件返回給你的對象是這樣的：

而不是你所期望的：

不僅是瀏覽器，在不支持ES6的模塊系統中同樣會出這個問題，就是因為它們并不認識default。所以你編譯后的JS文件實際上應當只輸出default，這就需要在Webpack配置里用targetExport來控制：

library: 'util',
libraryTarget: umd,
targetExport: 'default'

這樣上面的模塊加載函數factory會在返回值后面加一個['default']，這樣就只返回exports的default部分。

這個坑在umd格式下其實還是挺容易踩到的，例如你發布一個Vue組件，.vue文件中的JavaScript部分一般都是把Component對象以export default的格式導出的，就像這樣：

如果你把編譯后的JS文件直接放在瀏覽器里運行，并且用CDN的方式通過<script>加載Vue，你會發現Vue無法識別這個Component，因為你得到的這個對象多了一層不必要的default。

你可能會問如果我把輸出內容改成了default，會不會影響這個模塊在ES6環境下的使用？一般來說是不會的。之前一篇文章里已經談到，Webpack的生成代碼在引入一個模塊時，會通過一個叫__esModule的值來設置和判斷它是不是ES6格式的export，現在如果只導出default部分，那么這個對象是被視為非ES6的，因為它不含__esModule。這樣其它模塊通過import來引入這個模塊時，會引入整個對象，這實際上變相地就等價于只引入原模塊的export default部分。

當然以上討論的前提是，你所有需要export的內容全部都在export default里。如果你既有default，又有正常的export，那編譯后的文件只導出default部分顯然是不行的。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

200行代碼實現blockchain 區塊鏈實例詳解

vue使用facebook twitter分享示例

react以create-react-app為基礎創建項目

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com