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

和之前一篇文章一樣，本文主要分析的是Webpack的生成代碼，并結(jié)合它來(lái)說(shuō)明編譯庫(kù)時(shí)Webpack那些關(guān)于library的配置選項(xiàng)的具體作用，相應(yīng)的官方文檔在這里。

編寫(xiě)JS的庫(kù)

我們還是從簡(jiǎn)單的案例開(kāi)始，我們隨便編寫(xiě)一個(gè)簡(jiǎn)單的庫(kù)util.js：

import $ from 'jquery'

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

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

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

提供了兩個(gè)函數(shù)，當(dāng)然它們之間毫無(wú)關(guān)系，也實(shí)際上沒(méi)有任何卵用，純粹是僅供教學(xué)參考。。。

接下來(lái)寫(xiě)Webpack的配置：

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

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

但僅僅這樣是不夠的，這樣輸出的文件就是一個(gè)立即執(zhí)行的函數(shù)，最后會(huì)返回util.js的exports，參照上一篇文章中分析，最后生成的bundle代碼結(jié)構(gòu)大致是這樣的：

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

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

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

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
});

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

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

 library: 'util',
 libraryTarget: commonjs2
}

這里最重要的就是libraryTarget，我們現(xiàn)在采用commonjs2的格式，就會(huì)得到上面的編譯結(jié)果，也就是說(shuō)Webpack會(huì)library把最后的輸出以CommonJS的形式export出來(lái)，這樣就實(shí)現(xiàn)了一個(gè)庫(kù)的發(fā)布。

其它發(fā)布格式

除了commonjs2，libraryTarget還有其它選項(xiàng)：

var (默認(rèn)值，發(fā)布為全局變量)
commonjs
commonjs2
amd
umd

使用不同的選項(xiàng)，編譯出來(lái)的文件就能夠在不同JavaScript執(zhí)行環(huán)境中使用。在這里我們直接看萬(wàn)金油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的情況要復(fù)雜得多，因?yàn)樗枰幚砀鞣N不同的case，但其實(shí)后面的部分都是一樣的，最重要的就是最前面的幾行，這是umd模塊的標(biāo)準(zhǔn)寫(xiě)法。它運(yùn)行傳入的factory函數(shù)，實(shí)際上就是加載模塊的函數(shù)，然后把返回的結(jié)果根據(jù)不同的運(yùn)行環(huán)境交給相應(yīng)的對(duì)象。例如var，那就會(huì)把結(jié)果設(shè)置為一個(gè)全局變量，這用于瀏覽器通過(guò)<script>標(biāo)簽直接導(dǎo)入該JS文件；如果是CommonJS，它則交給exports對(duì)象；如果是AMD環(huán)境，它也是用標(biāo)準(zhǔn)的AMD的寫(xiě)法。這樣這個(gè)發(fā)布出來(lái)的JS庫(kù)就可以在任意的環(huán)境中都能被其他人使用。

targetExport控制輸出內(nèi)容

如果用umd格式打包，可能會(huì)有一個(gè)坑需要注意，如果你的庫(kù)的源代碼是用ES6格式export default來(lái)輸出的，正如上面的例子util.js，你直接把編譯后的JS庫(kù)文件放到瀏覽器中使用，可以是<script>，或者RequireJS，可能得不到你想要的結(jié)果。這是因?yàn)槟愕腏S文件返回給你的對(duì)象是這樣的：

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

而不是你所期望的：

{
 sayHello: sayHello,
 hideImages: hideImages
}

不僅是瀏覽器，在不支持ES6的模塊系統(tǒng)中同樣會(huì)出這個(gè)問(wèn)題，就是因?yàn)樗鼈儾⒉徽J(rèn)識(shí)default。所以你編譯后的JS文件實(shí)際上應(yīng)當(dāng)只輸出default，這就需要在Webpack配置里用targetExport來(lái)控制：

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

這樣上面的模塊加載函數(shù)factory會(huì)在返回值后面加一個(gè)['default']，這樣就只返回exports的default部分。

這個(gè)坑在umd格式下其實(shí)還是挺容易踩到的，例如你發(fā)布一個(gè)Vue組件，.vue文件中的JavaScript部分一般都是把Component對(duì)象以export default的格式導(dǎo)出的，就像這樣：

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

如果你把編譯后的JS文件直接放在瀏覽器里運(yùn)行，并且用CDN的方式通過(guò)<script>加載Vue，你會(huì)發(fā)現(xiàn)Vue無(wú)法識(shí)別這個(gè)Component，因?yàn)槟愕玫降倪@個(gè)對(duì)象多了一層不必要的default。

你可能會(huì)問(wèn)如果我把輸出內(nèi)容改成了default，會(huì)不會(huì)影響這個(gè)模塊在ES6環(huán)境下的使用？一般來(lái)說(shuō)是不會(huì)的。之前一篇文章里已經(jīng)談到，Webpack的生成代碼在引入一個(gè)模塊時(shí)，會(huì)通過(guò)一個(gè)叫__esModule的值來(lái)設(shè)置和判斷它是不是ES6格式的export，現(xiàn)在如果只導(dǎo)出default部分，那么這個(gè)對(duì)象是被視為非ES6的，因?yàn)樗缓琠_esModule。這樣其它模塊通過(guò)import來(lái)引入這個(gè)模塊時(shí)，會(huì)引入整個(gè)對(duì)象，這實(shí)際上變相地就等價(jià)于只引入原模塊的export default部分。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論