為什么自己寫的組件庫(kù)被引用總是報(bào)錯(cuò)——詳解webpack的library和libraryTarget

lewif 發(fā)布于2019-08-23 14:51 / 3302人閱讀

摘要：可以選擇的選項(xiàng)有返回值成為的一個(gè)屬性返回值成為的一個(gè)屬性返回值成為的一個(gè)屬性例如可以看到，這種情況下也必須指定的名字。異步生成方式在這種情況下，的值為，組件庫(kù)入口起點(diǎn)的返回值，會(huì)被包裹到一個(gè)包裝容器中，并配合的使用組件庫(kù)的依賴由指定。

如果我們僅僅是實(shí)現(xiàn)一個(gè)項(xiàng)目，我們大概率不會(huì)關(guān)注到webpack output中的這兩個(gè)屬性。但是如果我們是實(shí)現(xiàn)一個(gè)組件庫(kù)，那么這兩個(gè)屬性就變得至關(guān)重要了。本文從自己之前遇到的一個(gè)問(wèn)題說(shuō)起，繼而引申出library和libraryTarget屬性。

1. 故事起源

當(dāng)我自己開始寫第一個(gè)組件庫(kù)的時(shí)候，很快我就擼好了框架的代碼，然后我興致沖沖的把我的組件庫(kù)引入到我的項(xiàng)目中，我記得那時(shí)候我是這么寫的：

組件庫(kù)：

import Feeds from "@/components/feeds/index";
export {
  Feeds,
};

主項(xiàng)目：

import Feeds from "@/tencent/newsH5Ad";

// 一些其他代碼

然后我就收獲了一個(gè)報(bào)錯(cuò)，Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null。啊？難道是我的最終輸出代碼有問(wèn)題？我檢查了一下最終輸出的代碼，沒(méi)有問(wèn)題，F(xiàn)eed組件的代碼也在里面。這個(gè)問(wèn)題我查了很久，都沒(méi)有答案，最后才發(fā)現(xiàn)是webpack打包的問(wèn)題。這就涉及到了本文的主角，library和libraryTarget。

2. 2. library和libraryTarget

我們都知道，webpack可以將不同的模塊化方式（commonjs, AMD, CMD, ES6 Module）的代碼打包。那我們打出來(lái)的代碼包其實(shí)也可以按不同的模塊化方式生成，所以：

libraryTarget就是配置webpack打包內(nèi)容的模塊方式的參數(shù)
而library就是webpack打包內(nèi)容的名字

所以library規(guī)定了組件庫(kù)返回值的名字，libraryTarget規(guī)定了返回值的編碼格式。

libraryTarget的配置選項(xiàng)可以分為四大類：

2.1 按不同的模塊方式生成

也就是我們這個(gè)問(wèn)題的解決方法，由于我寫的是一個(gè)React的UI組件庫(kù)，所以我們需要commonjs的模塊方式。因此只需要在webpack.config.js中配置這一項(xiàng)即可：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    // library: "MyLibrary", // 模塊名稱
    libraryTarget: "commonjs2", // 輸出格式
  },
  // 其他代碼
}

事實(shí)上，你可以選擇的選項(xiàng)有：

commonjs/commonjs2: 將你的library暴露為CommonJS模塊
amd: 將你的library暴露為amd模塊
umd: 將你的library暴露為所有的模塊定義下都可運(yùn)行的方式

其中AMD和UMD需要指定library，如果不聲明組件庫(kù)則不能正常運(yùn)行。這是為了在瀏覽器上通過(guò)script標(biāo)簽加載時(shí)，用AMD模塊方式輸出的組件庫(kù)可以有明確的模塊名。如：

define("MyLibrary", [], function() {
  return _entry_return_; // 此模塊返回值，是入口 chunk 返回的值
});

注意：commonjs和commonjs2幾乎相同，只不過(guò)commonjs只包含exports，而commonjs2還包含module.exports，所以直接使用commonjs2即可。

2.2 生成為一個(gè)變量

libraryTarget的默認(rèn)值是var，顧名思義，就是將組件庫(kù)入口起點(diǎn)的返回值生成一個(gè)變量。如：

var MyLibrary = _entry_return_;

也可以選擇‘a(chǎn)ssign"，那樣的話將默認(rèn)生成和一個(gè)全局的變量。不管是var還是assign，都需要設(shè)置library的名稱，否則就會(huì)報(bào)錯(cuò)。

2.3 生成一個(gè)為一個(gè)對(duì)象的屬性

和第二種情況差不多，只不過(guò)會(huì)把這個(gè)變量賦值給某個(gè)對(duì)象，作為它的一個(gè)屬性存在。可以選擇的選項(xiàng)有：

this: 返回值成為this的一個(gè)屬性
window: 返回值成為window的一個(gè)屬性
global: 返回值成為global的一個(gè)屬性

例如：

this["MyLibrary"] = _entry_return_;
window["MyLibrary"] = _entry_return_;
global["MyLibrary"] = _entry_return_;

可以看到，這種情況下也必須指定library的名字。

2.4 異步生成方式

在這種情況下，libraryTarget的值為‘jsonp’，組件庫(kù)入口起點(diǎn)的返回值，會(huì)被包裹到一個(gè)jsonp包裝容器中，并配合webpack的externals使用——組件庫(kù)的依賴由externals指定。如：

MyLibrary(_entry_return_);

3. 總結(jié)

本文介紹了webpack中l(wèi)ibraray和libraryTarget的相關(guān)內(nèi)容，解釋了為什么不設(shè)置它們時(shí)使用webpack打包出來(lái)的組件庫(kù)會(huì)有問(wèn)題。一般情況下，作為vue或者react組件庫(kù)，libraryTarget在commonjs2，amd，umd中三者擇其一即可。

參考文獻(xiàn)

《webpack文檔》