欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack組織模塊打包Library的原理及實現(xiàn)

 更新時間:2018年03月10日 14:34:19   作者:hyuan  
這篇文章主要介紹了webpack組織模塊打包Library的原理及實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

編寫JS的庫

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

import $ from 'jquery'

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

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

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

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

接下來寫Webpack的配置:

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

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

但僅僅這樣是不夠的,這樣輸出的文件就是一個立即執(zhí)行的函數(shù),最后會返回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部分返回而已,而我們需要的是將這個返回值交給編譯后的文件的module.export,這樣編譯后的文件就成了一個可以被別人import的庫。所以我們希望得到的編譯文件應(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的格式,就會得到上面的編譯結(jié)果,也就是說Webpack會library把最后的輸出以CommonJS的形式export出來,這樣就實現(xiàn)了一個庫的發(fā)布。

其它發(fā)布格式

除了commonjs2,libraryTarget還有其它選項:

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

使用不同的選項,編譯出來的文件就能夠在不同JavaScript執(zhí)行環(huá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ù)雜得多,因為它需要處理各種不同的case,但其實后面的部分都是一樣的,最重要的就是最前面的幾行,這是umd模塊的標準寫法。它運行傳入的factory函數(shù),實際上就是加載模塊的函數(shù),然后把返回的結(jié)果根據(jù)不同的運行環(huán)境交給相應(yīng)的對象。例如var,那就會把結(jié)果設(shè)置為一個全局變量,這用于瀏覽器通過<script>標簽直接導(dǎo)入該JS文件;如果是CommonJS,它則交給exports對象;如果是AMD環(huán)境,它也是用標準的AMD的寫法。這樣這個發(fā)布出來的JS庫就可以在任意的環(huán)境中都能被其他人使用。

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

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

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

而不是你所期望的:

{
 sayHello: sayHello,
 hideImages: hideImages
}

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

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

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

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

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

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

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

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

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

相關(guān)文章

  • js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解

    js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解

    由于業(yè)務(wù)需要,要求實現(xiàn)樹形菜單,且菜單數(shù)據(jù)由后臺返回,下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • js刪除指定位置超鏈接中含有百度與360的標題

    js刪除指定位置超鏈接中含有百度與360的標題

    最近需要將最近更新的部分內(nèi)容刪除,只要標題中包括百度與360的都給刪除了,主要用到了jquery的each,需要的朋友可以參考下
    2021-01-01
  • Javascript緩存API

    Javascript緩存API

    JavaScript ServiceWorker API的好處就是讓W(xué)EB開發(fā)人員輕松的控制緩存。這篇文章主要為大家詳細介紹了Javascript緩存API,感興趣的小伙伴們可以參考一下
    2016-06-06
  • JS 組件系列之BootstrapTable的treegrid功能

    JS 組件系列之BootstrapTable的treegrid功能

    這篇文章主要介紹了JS 組件系列之BootstrapTable的treegrid功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-06-06
  • js 鼠標移動顯示圖片的簡單實例

    js 鼠標移動顯示圖片的簡單實例

    本篇文章主要是對js鼠標移動顯示圖片的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • 在knockoutjs 上自己實現(xiàn)的flux(實例講解)

    在knockoutjs 上自己實現(xiàn)的flux(實例講解)

    下面小編就為大家分享一篇在knockoutjs 上自己實現(xiàn)的flux方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • JS實現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果

    JS實現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果

    這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果,涉及javascript鼠標事件及頁面元素顯示的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-08-08
  • js仿3366小游戲選字游戲

    js仿3366小游戲選字游戲

    這篇文章主要為大家詳細介紹了js仿3366小游戲選字游戲
    2016-04-04
  • 詳解JavaScript 浮點數(shù)運算的精度問題

    詳解JavaScript 浮點數(shù)運算的精度問題

    這篇文章主要介紹了詳解JavaScript 浮點數(shù)運算的精度問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • JavaScript 驗證瀏覽器是否支持javascript的方法小結(jié)

    JavaScript 驗證瀏覽器是否支持javascript的方法小結(jié)

    一些網(wǎng)站只有客戶端js的驗證,這樣就給一些hacher一些可趁之機了,不信大家測試一些網(wǎng)站的注冊功能看看,有部分網(wǎng)站只有客戶端驗證,我為了達到客戶端驗證,先是判斷瀏覽器是否支持js,如果不支持,提示信息,然后屏蔽掉發(fā)送按鈕
    2009-05-05

最新評論