webpack?output.library的16?種取值方法示例
前置準備
在項目開發(fā)中使用 webpack 打包前端代碼，對 output.library 配置項總是不求甚解，只知道將代碼打包成 npm 庫的時候要配置它。這段時間又要開發(fā)組件庫，借助這次機會對 output.library 求甚解。
配置過 output.library 的同學應該也配置過 output.libraryTarget，在開發(fā)庫的時候總是一起配置它們。由于在webpack文檔中推薦使用 output.library.type 代替 output.libraryTarget，所以本文只介紹 output.library。
本文 webpack 的版本是 5.74.0。
入口代碼如下：
// index.js
export default function add(a, b) {
console.log(a + b)
}
webpack 的配置如下，后續(xù)我們只關注 library 字段。
const path = require('path');
module.exports = {
entry: './index.js',
mode: "none",
output: {
filename: 'main.js',
// library: 'MyLibrary',
path: path.resolve(__dirname, 'dist'),
},
};
打包輸出的文件中，除了包含 index.js 中的源碼，還包含 webpack 運行時，代碼如下，后續(xù)將不再介紹它。
var __webpack_require__ = {};
// 將 definition 中的屬性添加到 exports 上
__webpack_require__.d = (exports, definition) => {
for(var key in definition) {
if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
}
}
};
// 判斷 obj 上是否有 prop
__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
// 在 exports 上定義 __esModule 屬性
__webpack_require__.r = (exports) => {
if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
}
Object.defineProperty(exports, '__esModule', { value: true });
};
點這里得到文本的代碼。
不配置 library
在介紹 library 各配置項的作用前，先看一下不配置 library 時的打包結果。如下：
// 自執(zhí)行函數
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
});
// 打包入口導出的函數
function __WEBPACK_DEFAULT_EXPORT__(a, b) {
console.log(a + b)
}
})()
;
從上述代碼可以看出，不配置 library 時，__WEBPACK_DEFAULT_EXPORT__ 函數沒有被公開，在庫外部的任何位置都訪問不到它。
下面將介紹配置 library 時的各種情況，library 可接受的數據類型是 string | string[] | object。string 是 object 類型的簡寫形式，當值為 object 類型時，object 中能包含的屬性有 name、type、export、auxiliaryComment 和 umdNamedDefine。本文將重點放在 type 字段上，它決定如何公開當前庫，取值基本固定，name 字段可以是任何字符串，它用來指定庫的名稱。
library.type = var(默認值)
將 library 的值改成 {type: 'var', name: 'MyLibrary'}, 打包結果如下：
var MyLibrary;
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
MyLibrary = __webpack_exports__;
})()
從上述代碼可以看出，通過MyLibrary能訪問到add函數，當不能保證MyLibrary在全局變量上。
library.type = window
將 library 的值改成 {type: 'window', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
window.MyLibrary = __webpack_exports__;
})()
從上述代碼可以看出，通過window.MyLibrary能訪問到add函數。
library.type = module
將 library 的值改成 {type: 'module'}, 此時還要 experiments.outputModule 設置為 true , 打包結果如下：
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
var __webpack_exports__default = __webpack_exports__["default"];
export { __webpack_exports__default as default };
此時不存在閉包，并且能用 es modules 將庫導入。
library.type = this
將 library 的值改成 {type: 'this', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
this.MyLibrary = __webpack_exports__;
})()
此時通過 this.MyLibrary 能訪問到 add 函數
library.type = self
將 library 的值改成 {type: 'self', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
self.MyLibrary = __webpack_exports__;
})()
此時通過 self.MyLibrary 可訪問到 add 函數，在瀏覽器環(huán)境的全局上下文中 self 等于 window
library.type = global
將 library 的值改成 {type: 'global', name: 'MyLibrary'}，此時 MyLibrary 會被分配到全局對象，全局對象會根據target值的不同而不同，全部對象可能的值是 self、global 或 globalThis。當 target 的值為 web（默認值），代碼結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
self.MyLibrary = __webpack_exports__;
})()
此時的打包結果與 library.type = self 結果一樣。
library.type = commonjs
將 library 的值改成 {type: 'commonjs', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
exports.MyLibrary = __webpack_exports__;
})()
顧名思義，如果公開的庫要在 CommonJS 環(huán)境中使用，那么將 library.type 設置成 commonjs，此時 MyLibrary 分配給了 exports
library.type = commonjs2
將 library 的值改成 {type: 'commonjs2', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
module.exports.MyLibrary = __webpack_exports__;
})()
此時 MyLibrary 分配給了 module.exports，如果公開的庫要在 Node.js 環(huán)境中運行，推薦將 library.type 設置為 commonjs2。commonjs 和 commonjs2 很像，但它們有一些不同，簡單的說 CommonJs 規(guī)范只定義了 exports ，但是 module.exports 被 node.js 和一些其他實現(xiàn) CommonJs 規(guī)范的模塊系統(tǒng)所使用，commonjs 表示純 CommonJs，commonjs2 在 CommonJs 的基礎上增加了 module.exports。
library.type = commonjs-static
將 library 的值改成 {type: 'commonjs-module'}，注意此時沒有設置 name 屬性, 打包結果如下：
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
exports["default"] = __webpack_exports__["default"];
Object.defineProperty(exports, "__esModule", { value: true });
})()
在 CommonJS 模塊中使用庫
const add = require('./dist/main.js');
在 ESM 模塊中使用庫
import add from './dist/main.js';
當源代碼是用 ESM 編寫的，但你的庫要同時兼容 CJS 和 ESM 時，library.type = commonjs-static將很有用。
library.type = amd
將 library 的值改成 {type: 'amd', name: 'MyLibrary'}, 打包結果如下：
define("MyLibrary", [], () => { return /******/ (() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
return __webpack_exports__;
})()
;
});;
當你的庫要在 amd 模塊中使用時，將 library.type 設置成 amd
library.type = umd
將 library 的值改成 {type: 'umd', name: 'MyLibrary'}, 打包結果如下：
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') // commonjs2
module.exports = factory();
else if(typeof define === 'function' && define.amd) // amd
define([], factory);
else if(typeof exports === 'object') // commonjs
exports["MyLibrary"] = factory();
else // 全局變量
root["MyLibrary"] = factory();
})(self, () => {
return /******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
return __webpack_exports__;
})()
;
});
此時你的庫能用 Commonjs、AMD 和全局變量引入，在開發(fā)庫時將 library.type 設置成 umd 很常見。
library.type = assign
將 library 的值改成 {type: 'assign', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
})();
MyLibrary = __webpack_exports__;
})()
這將生成一個隱含的全局變量 MyLibrary，通過 MyLibrary 能訪問 add 函數，它有可能覆蓋一個現(xiàn)有值，因此要小心使用。
library.type = assign-properties
將 library 的值改成 {type: 'assign-properties', name: 'MyLibrary'}, 打包結果如下：
(() => {
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
})();
var __webpack_export_target__ = (MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary);
// 將 __webpack_exports__ 上的屬性轉移到 __webpack_export_target__ 上。
for(var i in __webpack_exports__) __webpack_export_target__[i] = __webpack_exports__[i];
if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
})()
它與 assign 類似，但更安全，如果 MyLibrary 存在，那么它將重用 MyLibrary，而非覆蓋。
library.type = jsonp
將 library 的值改成 {type: 'jsonp', name: 'MyLibrary'}, 打包結果如下：
MyLibrary((() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
return __webpack_exports__;
})()
);
此時入口的源碼在 jsonp 的包裹器中，這種情況要確保 MyLibrary 函數存在。
library.type = system
將 library 的值改成 {type: 'system', name: 'MyLibrary'}, 打包結果如下：
System.register("MyLibrary", [], function(__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
return {
execute: function() {
__WEBPACK_DYNAMIC_EXPORT__(
(() => {
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ add)
});
function add(a, b) {
console.log(a + b)
}
return __webpack_exports__;
})()
);
}
};
});
將你的庫公開為一個System 模塊。
總結
當你的庫導出的內容需要在另外的地方（通常是另一個項目）訪問，那么你應該給 webpack 配置 library 字段，library 究竟要配置成什么值，這取決于你希望你的庫怎么被引入
以上就是webpack output.library的16 種取值方法示例的詳細內容，更多關于webpack output.library取值的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了js實現(xiàn)的奧運倒計時時鐘效果代碼,可實現(xiàn)根據指定時間進行倒計時的實時顯示效果,非常簡單實用,需要的朋友可以參考下2015-12-12
js 用CreateElement動態(tài)創(chuàng)建標簽示例
用CreateElement動態(tài)創(chuàng)建標簽，主要是html中常用的一些標簽，在本文有詳細的示例，喜歡的朋友可以參考下2013-11-11
Javascript實現(xiàn)的Map集合工具類完整實例
這篇文章主要介紹了Javascript實現(xiàn)的Map集合工具類,以完整實例形式分析了javascript實現(xiàn)map集合的構造、查找、刪除、判斷等相關技巧,需要的朋友可以參考下2015-07-07
本文主要介紹了js的三種繼承方式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
javascript insertAfter()定義與用法示例
這篇文章主要介紹了javascript insertAfter()定義與用法,實例分析了javascript節(jié)點后插入元素的實現(xiàn)與使用方法,需要的朋友可以參考下2016-07-07
下面小編就為大家?guī)硪黄狫S轉換HTML轉義符的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
下面小編就為大家?guī)硪黄鷍avascript實現(xiàn)的一個簡單動畫效果。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
這篇文章主要介紹了JavaScript實現(xiàn)在頁面間傳值的方法,涉及javascript傳值的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
雖然IE的事件對象與DOM的事件對象存在差異，但是IE事件對象中所包含的信息和能力，與DOM事件對象是相同的，只是表現(xiàn)形式不同而已，通過映射的方式，我們可以實現(xiàn)兼容IE和DOM事件對象的事件對象2012-06-06
淺談JS for循環(huán)中使用break和continue的區(qū)別
這篇文章主要介紹了淺談for循環(huán)中使用break和continue的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07