Question

我使用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调用引导函数

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

Answer 1

Welp我最终搞清楚了。

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

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"

使用typescript和webpack扩展jQuery

1 个答案: