javascript - 如何用webpack建構和使用自己的第三方JS函式庫？

Question

很好奇像jQuery，React這些打包好的函式庫載入之後可以在全域中使用$,jQuery和React來訪問，想知道自己構建的庫如何做到可以在全局中像React這樣可以在全局中使用。

我發現webpack打包之後在全域根本找不到定義的相關物件。

Answer 1

打包成 library 即可，請詳讀 https://webpack.js.org/guides...

Answer 2

webpack打包後都是閉包, 全域怎麼可能存取的到

要想全域存取的到, 必須在webpack裡新增new webpack.ProvidePlugin的相關設定

例如

new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'})

Answer 3

一般直接把你的主物件(或類別)註冊到全域物件上就好了，例如可以模仿 jQuery 註冊方法(去掉了判斷 document 的那一段)：

(function(global, factory) {
    "use strict";
    // 兼容模块化框架(主要是 AMD 框架)
    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = factory(global);
    } else {
        factory(global);
    }
})(typeof window !== "undefined" ? window : this, function(global) {
    // 这里是你的库代码
    global = MyLibEntry;
});

如果你是採用的模組化寫法，可以在入口模組上寫上述程式碼。