webpack中l(wèi)ibrary和libraryTarget詳解
默認 webpack 導出都是這樣的結構，一個自執(zhí)行函數(shù)的形式。
(() => {return {name: 'jack',age: 24,};})();
沒有賦值操作，所以其他文件沒法引用該對象。加了 library 和 libraryTarget 之后的 webpack 配置：
output: {...library: 'finalModule',libraryTarget: 'var',},
var finalModule = (() => {return {name: 'jack',age: 24,};})();
特點：有賦值操作，賦值給 library 定義的變量。所以 libraryTarget: 'var' 的含義就是作為全局變量，具體變量的名字叫什么是通過 library 來定義的。
libraryTarget: 'assign' 的 webpack 配置：
output: {...library: 'finalModule',libraryTarget: 'assign',},
finalModule = (() => {return {name: 'jack',age: 24,};})();
特點：賦值給全局變量， 可能會覆蓋宿主環(huán)境下同名的變量名，因為我們看到變量是直接使用的，并沒有通過 var 去聲明，和第一種還是有區(qū)別。
libraryTarget: 'this' 的 webpack 配置：
output: {...library: 'finalModule',libraryTarget: 'this',},
this.finalModule = (() => {return {name: 'jack',age: 24,};})();
通過對象屬性暴露，這里是 this 對象，屬性是通過 library 來定義的。
當然我們也可以掛在到 window 對象上。
output: {...library: 'finalModule',libraryTarget: 'window',},
window.finalModule = (() => {return {name: 'jack',age: 24,};})();
當然我們也可以掛在到 global 對象上。
output: {...library: 'finalModule',libraryTarget: 'global',},
global.finalModule = (() => {return {name: 'jack',age: 24,};})();
我們還可以定義在導出的對象上，方便其他庫導入進來使用。
output: {...library: 'finalModule',libraryTarget: 'commonjs',},
exports.finalModule = (() => {return {name: 'jack',age: 24,};})();
還有默認導出，使用 libraryTarget 為 commonjs2 這個屬性。此時 library 配置的字段會失效。所以我們可以省略。
output: {...libraryTarget: 'commonjs',},
module.exports = (() => {return {name: 'jack',age: 24}})());
這是 commonJS 規(guī)范，還有 amd 規(guī)范的形式。
output: {...library: 'finalModule',libraryTarget: 'amd',},
define('finalModule', [], () => {return (() => {return {name: 'jack',age: 24,};})();});
太多了?。?！
評論
圖片
表情