如何用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;
});

如果你是采用的模块化写法，可以在入口模块上写上述代码。