Comment créer et utiliser votre propre bibliothèque JS tierce avec webpack ?

Question

Curieux de voir comment quelque chose comme jQuery，React这些打包好的库加载之后可以在全局中使用$,jQuery和React来访问，想知道自己构建的库如何做到可以在全局中像React pourrait être utilisé à l'échelle mondiale.

J'ai découvert qu'après l'empaquetage du webpack, les objets associés définis ne pouvaient pas du tout être trouvés globalement.

Answer 1

Emballez-le dans une bibliothèque, veuillez lire https://webpack.js.org/guides...

Answer 2

Une fois le webpack emballé, toutes les fermetures sont terminées. Comment peut-on y accéder à l'échelle mondiale ?

Afin d'avoir un accès global, la configuration pertinente du nouveau webpack.ProvidePlugin doit être ajoutée au webpack

Par exemple

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

Answer 3

Généralement, enregistrez simplement votre objet principal (ou classe) directement dans l'objet global. Par exemple, vous pouvez imiter la méthode d'enregistrement jQuery (en supprimant la section qui détermine le 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;
});

Si vous adoptez une méthode d'écriture modulaire, vous pouvez écrire le code ci-dessus sur le module d'entrée.