資訊專欄INFORMATION COLUMN
摘要：可以選擇的選項有返回值成為的一個屬性返回值成為的一個屬性返回值成為的一個屬性例如可以看到，這種情況下也必須指定的名字。異步生成方式在這種情況下，的值為，組件庫入口起點的返回值，會被包裹到一個包裝容器中，并配合的使用組件庫的依賴由指定。
如果我們僅僅是實現(xiàn)一個項目，我們大概率不會關(guān)注到webpack output中的這兩個屬性。但是如果我們是實現(xiàn)一個組件庫，那么這兩個屬性就變得至關(guān)重要了。本文從自己之前遇到的一個問題說起，繼而引申出library和libraryTarget屬性。1. 故事起源
當我自己開始寫第一個組件庫的時候，很快我就擼好了框架的代碼，然后我興致沖沖的把我的組件庫引入到我的項目中，我記得那時候我是這么寫的：
組件庫：
import Feeds from "@/components/feeds/index";
export {
Feeds,
};
主項目：
import Feeds from "@/tencent/newsH5Ad"; // 一些其他代碼
然后我就收獲了一個報錯，Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null。啊？難道是我的最終輸出代碼有問題？我檢查了一下最終輸出的代碼，沒有問題，F(xiàn)eed組件的代碼也在里面。這個問題我查了很久，都沒有答案，最后才發(fā)現(xiàn)是webpack打包的問題。這就涉及到了本文的主角，library和libraryTarget。
2. 2. library和libraryTarget我們都知道，webpack可以將不同的模塊化方式（commonjs, AMD, CMD, ES6 Module）的代碼打包。那我們打出來的代碼包其實也可以按不同的模塊化方式生成，所以：
libraryTarget就是配置webpack打包內(nèi)容的模塊方式的參數(shù)
而library就是webpack打包內(nèi)容的名字
所以library規(guī)定了組件庫返回值的名字，libraryTarget規(guī)定了返回值的編碼格式。
libraryTarget的配置選項可以分為四大類：
2.1 按不同的模塊方式生成也就是我們這個問題的解決方法，由于我寫的是一個React的UI組件庫，所以我們需要commonjs的模塊方式。因此只需要在webpack.config.js中配置這一項即可：
module.exports = {
entry: "./src/index.js",
output: {
filename: "index.js",
// library: "MyLibrary", // 模塊名稱
libraryTarget: "commonjs2", // 輸出格式
},
// 其他代碼
}
事實上，你可以選擇的選項有：
commonjs/commonjs2: 將你的library暴露為CommonJS模塊
amd: 將你的library暴露為amd模塊
umd: 將你的library暴露為所有的模塊定義下都可運行的方式
其中AMD和UMD需要指定library，如果不聲明組件庫則不能正常運行。這是為了在瀏覽器上通過script標簽加載時，用AMD模塊方式輸出的組件庫可以有明確的模塊名。如：
define("MyLibrary", [], function() {
return _entry_return_; // 此模塊返回值，是入口 chunk 返回的值
});
注意：commonjs和commonjs2幾乎相同，只不過commonjs只包含exports，而commonjs2還包含module.exports，所以直接使用commonjs2即可。
2.2 生成為一個變量libraryTarget的默認值是var，顧名思義，就是將組件庫入口起點的返回值生成一個變量。如：
var MyLibrary = _entry_return_;
也可以選擇‘a(chǎn)ssign"，那樣的話將默認生成和一個全局的變量。不管是var還是assign，都需要設(shè)置library的名稱，否則就會報錯。
2.3 生成一個為一個對象的屬性和第二種情況差不多，只不過會把這個變量賦值給某個對象，作為它的一個屬性存在?？梢赃x擇的選項有：
this: 返回值成為this的一個屬性
window: 返回值成為window的一個屬性
global: 返回值成為global的一個屬性
例如：
this["MyLibrary"] = _entry_return_; window["MyLibrary"] = _entry_return_; global["MyLibrary"] = _entry_return_;
可以看到，這種情況下也必須指定library的名字。
2.4 異步生成方式在這種情況下，libraryTarget的值為‘jsonp’，組件庫入口起點的返回值，會被包裹到一個jsonp包裝容器中，并配合webpack的externals使用——組件庫的依賴由externals指定。如：
MyLibrary(_entry_return_);3. 總結(jié)
本文介紹了webpack中l(wèi)ibraray和libraryTarget的相關(guān)內(nèi)容，解釋了為什么不設(shè)置它們時使用webpack打包出來的組件庫會有問題。一般情況下，作為vue或者react組件庫，libraryTarget在commonjs2，amd，umd中三者擇其一即可。
參考文獻《webpack文檔》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101244.html
摘要：組件庫開發(fā)總結(jié)由于工作需要，最近在學習怎么開發(fā)一個組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項目中也需要做處理。 Vue組件庫開發(fā)總結(jié) 由于工作需要，最近在學習怎么開發(fā)一個Vue組件庫。主要需要實現(xiàn)以下點：1.組件使用npm包引入2.實現(xiàn)按需引入及按需打包項目中許多實現(xiàn)是參考的element-ui，特別是webpack打包部分 組織項目 項目生成 項目生成是直接...
摘要：地址點個，給我們一點動力中文文檔地址交流地址點個，謝謝這套費了幾個月時間和很多心血，現(xiàn)在已經(jīng)趨于完善，你完全可以在你的生產(chǎn)環(huán)境中試著使用。 介紹 構(gòu)建自己的UI庫，你必須要對一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack為例。 github 地址: https://github.com/reming0227... (點個 star，給我們一點動力 ...
摘要：使用插件安裝使用測試訪問頁面注意大大的紅字，如果要在本項目下測試，需要修改項目名稱，不然報項目名字和包名字是一致的錯，無法安裝的如下結(jié)束語這個筆記繼上一篇插件開發(fā)流程詳解從開發(fā)到發(fā)布至一，替換了開發(fā)和測試的項目架構(gòu)。 前記：上一篇 https://www.cnblogs.com/adouw...，說到了一個完整的vue插件開發(fā)、發(fā)布的流程，總結(jié)下來就講了這么一個事，如何注入vue,...
摘要：文章介紹如何創(chuàng)建發(fā)布一個包，包括項目搭建發(fā)布流程注意事項等。語義化版本號分為三位。主版本號當進行了大都改動或者對有很多不兼容修改時應(yīng)該進行版本號升級。次版本號增加了部分特性或者優(yōu)化時升級該版本。如如果你想撤回指定版本，執(zhí)行包名版本號。 文章介紹如何創(chuàng)建發(fā)布一個npm包，包括項目搭建、發(fā)布流程、注意事項等。 演示代碼GitHub地址 1. 初始化項目 首先在創(chuàng)建好的項目文件夾下面執(zhí)行 ...
摘要：今天就來簡單講講它們的使用。這個插件的作用是創(chuàng)建文件和文件。使用其他的腳手架需要根據(jù)具體情況考慮。不要使用，否則在運行時會報錯誤。的和的要保持一致。 這段時間在對公司的打包構(gòu)建速度和app.js文件大小進行優(yōu)化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來簡單講講它們的使用。 其實對于這兩個插件網(wǎng)上已經(jīng)有很多各種各樣的文章了。不過筆者認為，...
閱讀 1521·2021-11-22 15:11
閱讀 2927·2019-08-30 14:16
閱讀 2844·2019-08-29 15:21
閱讀 2973·2019-08-29 15:11
閱讀 2532·2019-08-29 13:19
閱讀 3068·2019-08-29 12:25
閱讀 496·2019-08-29 12:21
閱讀 2919·2019-08-29 11:03
