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

這篇文章主要介紹了webpack組織模組打包Library的原理及實現，現在分享給大家，也給大家做個參考。

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

和之前一篇文章一樣，本文主要分析的是Webpack的生成程式碼，並結合它來說明編譯函式庫時Webpack那些關於library的設定選項的具體作用，相應的官方文件在這裡。

寫JS的函式庫

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

import $ from 'jquery'

function sayHello() {
 console.log("Hello");
}

function hideImages() {
 $('img').hide();
}

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

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

接下來寫Webpack的設定：

// 入口文件
entry: {
 util: './util.js',
}

// 输出文件
output: {
 path: './dist',
 filename: '[name].dist.js'
}

但僅僅這樣是不夠的，這樣輸出的檔案就是一個立即執行的函數，最後會回到util.js的exports，參考上一篇文章中分析，最後產生的bundle程式碼結構大致上是這樣的：

(function(modules) {
 var installedModules = {};
 
 function webpack_require(moduleId) {
   // ...
 }

 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 '/path/to/jquery.js': generated_jquery
});

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

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 '/path/to/jquery.js': generated_jquery
});

#要得到這樣的結果，Webpack設定output部分需要加入library資訊：

// 入口文件
output: {
 path: './dist',
 filename: '[name].dist.js',

 library: 'util',
 libraryTarget: commonjs2
}

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

其它發布格式

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

var (默认值，发布为全局变量)
commonjs
commonjs2
amd
umd

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

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object') // commonjs2
  module.exports = factory();
 else if(typeof define === 'function' && define.amd)
  define("util", [], factory); // amd
 else if(typeof exports === 'object')
  exports["util"] = factory(); // commonjs
 else
  root["util"] = factory(); // var
}) (window, function() {
 return (function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    // ...
  }
  return webpack_require('./util.js');
 }) ({
  './util.js': generated_util,
  '/path/to/jquery.js': generated_jquery
 });
}

比之前的commonjs2的情況要複雜得多，因為它需要處理各種不同的case，但其實後面的部分都是一樣的，最重要的就是最前面的幾行，這是umd模組的標準寫法。它運行傳入的factory函數，實際上就是載入模組的函數，然後把傳回的結果根據不同的運行環境交給對應的物件。例如var，那就會把結果設為一個全域變量，這用於瀏覽器透過3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤直接匯入該JS檔；如果是CommonJS，它則交給exports物件；如果是AMD環境，它也是用標準的AMD的寫法。這樣這個發佈出來的JS函式庫就可以在任意的環境中都能被其他人使用。

targetExport控制輸出內容

如果用umd格式打包，可能會有一個坑需要注意，如果你的函式庫的原始碼是用ES6格式export default來輸出的，正如上面的例util.js，你直接把編譯後的JS函式庫檔案放到瀏覽器中使用，可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a，或是RequireJS，可能不會得到你想要的結果。這是因為你的JS檔案回傳給你的物件是這樣的：

{
 'default': {
  sayHello: sayHello,
  hideImages: hideImages
 }
}

而不是你所期望的：

{
 sayHello: sayHello,
 hideImages: hideImages
}

不僅是瀏覽器，在不支援ES6的模組系統中同樣會出這個問題，就是因為它們並不認識default。所以你編譯後的JS檔其實要當只輸出default，這就需要在Webpack配置裡用targetExport來控制：

library: 'util',

libraryTarget: umd,
targetExport: 'default'

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

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

export default {
 name: 'xxx',
 data: {
  return // ...
 },
 props: {
  // ...
 }
 methods: {
  // ...
 }
}

如果你把編譯後的JS檔直接放在瀏覽器裡運行，並且用CDN的方式透過3f1c4e4b6b16bbbd69b2ee476dc4f83a載入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為基礎建立專案

以上是使用webpack模組給Library打包原理及實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！