為什么自己寫的組件庫被引用總是報錯——詳解webpack的library和libraryTarget

lewif 發布于2019-08-23 14:51 / 3293人閱讀

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

如果我們僅僅是實現一個項目，我們大概率不會關注到webpack output中的這兩個屬性。但是如果我們是實現一個組件庫，那么這兩個屬性就變得至關重要了。本文從自己之前遇到的一個問題說起，繼而引申出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。啊？難道是我的最終輸出代碼有問題？我檢查了一下最終輸出的代碼，沒有問題，Feed組件的代碼也在里面。這個問題我查了很久，都沒有答案，最后才發現是webpack打包的問題。這就涉及到了本文的主角，library和libraryTarget。

2. 2. library和libraryTarget

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

libraryTarget就是配置webpack打包內容的模塊方式的參數
而library就是webpack打包內容的名字

所以library規定了組件庫返回值的名字，libraryTarget規定了返回值的編碼格式。

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_;

也可以選擇‘assign"，那樣的話將默認生成和一個全局的變量。不管是var還是assign，都需要設置library的名稱，否則就會報錯。

2.3 生成一個為一個對象的屬性

和第二種情況差不多，只不過會把這個變量賦值給某個對象，作為它的一個屬性存在。可以選擇的選項有：

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. 總結

本文介紹了webpack中libraray和libraryTarget的相關內容，解釋了為什么不設置它們時使用webpack打包出來的組件庫會有問題。一般情況下，作為vue或者react組件庫，libraryTarget在commonjs2，amd，umd中三者擇其一即可。

參考文獻

《webpack文檔》

GPU云服務器云服務器 webpack引用jquery java項目引用報錯監控自己組件服務器云服務器的流量和自己的流量

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101244.html

Vue組件庫開發總結

摘要：組件庫開發總結由于工作需要，最近在學習怎么開發一個組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項目中也需要做處理。 Vue組件庫開發總結由于工作需要，最近在學習怎么開發一個Vue組件庫。主要需要實現以下點：1.組件使用npm包引入2.實現按需引入及按需打包項目中許多實現是參考的element-ui，特別是webpack打包部分組織項目項目生成項目生成是直接...

longshengwang 2019-08-23 18:16 評論0 收藏0
一文教你構建自己的library、webpack優化和npm版本控制

摘要：地址點個，給我們一點動力中文文檔地址交流地址點個，謝謝這套費了幾個月時間和很多心血，現在已經趨于完善，你完全可以在你的生產環境中試著使用。介紹構建自己的UI庫，你必須要對一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack為例。 github 地址: https://github.com/reming0227... (點個 star，給我們一點動力 ...

劉玉平 2019-08-26 13:53 評論0 收藏0
vue插件開發流程詳解-從開發到發布至npm（二）

摘要：使用插件安裝使用測試訪問頁面注意大大的紅字，如果要在本項目下測試，需要修改項目名稱，不然報項目名字和包名字是一致的錯，無法安裝的如下結束語這個筆記繼上一篇插件開發流程詳解從開發到發布至一，替換了開發和測試的項目架構。　　前記：上一篇 https://www.cnblogs.com/adouw...，說到了一個完整的vue插件開發、發布的流程，總結下來就講了這么一個事，如何注入vue,...

Flink_China 2019-08-23 12:00 評論0 收藏0
如何發布你自己的React模塊至NPM

摘要：文章介紹如何創建發布一個包，包括項目搭建發布流程注意事項等。語義化版本號分為三位。主版本號當進行了大都改動或者對有很多不兼容修改時應該進行版本號升級。次版本號增加了部分特性或者優化時升級該版本。如如果你想撤回指定版本，執行包名版本號。文章介紹如何創建發布一個npm包，包括項目搭建、發布流程、注意事項等。演示代碼GitHub地址 1. 初始化項目首先在創建好的項目文件夾下面執行 ...

zombieda 2019-08-23 14:48 評論0 收藏0
webpack的DllPlugin和DllReferencePlugin插件的簡單使用總結

摘要：今天就來簡單講講它們的使用。這個插件的作用是創建文件和文件。使用其他的腳手架需要根據具體情況考慮。不要使用，否則在運行時會報錯誤。的和的要保持一致。這段時間在對公司的打包構建速度和app.js文件大小進行優化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來簡單講講它們的使用。其實對于這兩個插件網上已經有很多各種各樣的文章了。不過筆者認為，...

wushuiyong 2019-08-22 18:31 評論0 收藏0