使用 typescript 和 webpack 扩展 jQuery答案

【问题标题】：Extending jQuery with typescript and webpack使用 typescript 和 webpack 扩展 jQuery
【发布时间】：2018-04-08 09:03:17
【问题描述】：

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

所以我可能有一些这样的类/接口：

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 并在页面中放置脚本时效果很好。但是现在如果我 export interface IMyClassOptions 和 export class MyClass 并与 webpack 组装，那么只有这些项目会被导出，并且附加到 jQuery 的代码不会包含在包中。

我能想到一些解决方法：

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

但我真的很喜欢自动化的东西，不需要额外的代码来设置

【问题讨论】：

标签： jquery typescript webpack

【解决方案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方法需要import "./myclass"

【讨论】：