jquery - 使用 typescript 和 webpack 扩展 jQuery

Question

我正在使用 typescript 使用所有全局定义和直接 javascript 编译将项目转换为使用模块，并将它们组装到带有 webpack 的包中。在某些情况下，我会将一个方法附加到 jQuery 来创建该类。

所以我可能有一些像这样的类/接口(interface):

interface IMyClassOptions {
    //....
}

class MyClass {
    constructor(target: JQuery, options?: IMyClassOptions){
        //....
    }
}

interface JQuery {
    myClass(options?: IMyClassOptions): JQuery;
}

$.fn.myClass = function(options?: IMyClassOptions) {
    const instance = new MyClass(this, options);
    this.data("myClass", instance);
    return this;
}

当将脚本直接编译为 javascript 并放入页面中时，效果很好。但是现在，如果我导出接口(interface) IMyClassOptions 和导出类 MyClass 并使用 webpack 进行组装，那么仅导出这些项目，并且附加到 jQuery 的代码不会包含在捆。

我可以想到一些解决方法:

• 创建一个附加该函数的 js 文件，并将其导入
• 向类添加静态引导函数来执行它，并让使用 MyClass 的模块调用引导函数

但我真的很想要一些自动化的东西，不需要额外的代码来设置事情

Answer 1

好吧，我终于弄清楚了。

解决方案是在函数调用中执行操作以在类定义中分配静态属性，例如:

declare global {
    interface JQuery {
        myClass(): JQuery;
    }
}

export class MyClass {
    static readonly bootstrapped = (() => {
        if(!("myClass" in $.fn)){
            $.fn.myClass = function(options?: IMyClassOptions){
                this.data("myClass", new MyClass(options));
                return this;
            }
        }

        return true;
    })();

然后如果只使用扩展的jQuery方法需要导入“./myclass”