如何通过 webpack 导入 jQuery 插件并将其放在 $/jQuery 下？ （ES6 + 打字稿）

Question

我有这几行代码：

import * as $ from "jquery";
import * as jQuery from "jquery";
import "exports?Arrive!arrive";

arrivejs npm 包是一个 jquery 插件。它缺少 module.exports 并且基本上只有“var Arrive”。感谢 WebPack，我设法将它放入我的应用程序中，但现在我想将它的方法放在 jQuery 和 $ 之下。喜欢关注

$.arrive(".coolclass", function() { // do something });
jQuery.arrive(".coolclass", function() { // do something });

我已经为到达js 制作了自己的界面。我最近添加了 JQueryStatic，因为它似乎无法正常工作（我刚开始遵循 ES6 合规性）

interface JQuery {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}

interface JQueryStatic {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}

有什么方法可以实现吗？我已经玩了好几个小时了..

更新：我想将到达和其余部分放在 window/jquery 元素下。

目前，这工作正常：

document.arrive("div", function () { console.log("works!");});

但我想把它改成

$(document).arrive("div", function () { console.log("works!");});

Answer 1

Arrive.js 将其方法绑定到 jQuery 元素，而不是 jQuery 或 $ 对象本身。试试这个：

$(document).arrive(".coolclass", function() { // do something });

Arrive 对象只公开了两个方法 Arrive.unbindAllArrive() 和 Arrive.unbindAllLeave() 所有其他到达方法都绑定到 javascirpt 和 jQuery 元素。

其次，arrive.js 不依赖于 jQuery。来自文档：

该库不依赖于 jQuery，您可以将下面示例中的 jQuery 元素替换为纯 javascript 元素，它可以正常工作。

Answer 2

对于任何因我的特殊情况（ES6、Typescript、webpack）而苦苦挣扎的人，我必须将其添加到到达.js 文件的顶部。

window.$ = window.jQuery = require("jquery");

然后当我导入到全局范围时，我必须这样做：

import * as $ from "jquery"; //Present since before, likely relevant
import * as jQuery from "jquery"; //Present since before, likely relevant

import "exports?Arrive!arrive"; // <-

感谢 Uzair 在 Skype 上支持我。他的回答也很有道理，只是与我的问题没有直接关系。

作为奖励，这就是我的 typescript 定义到达的样子。我没有对它进行 PR，因为我没有为它编写测试（需要提交），但有人可以免费为我做，或者直接创建你自己的文件。

// Type definitions for Arrive 2.3.1
// Project: https://github.com/uzairfarooq/arrive
// Definitions by: William Bernting <https://github.com/qvazzler>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

interface ArriveOptions {
    fireOnAttributesModification?: boolean;
    onceOnly?: boolean;
    existing?: boolean;
}

interface LeaveOptions {
    fireOnAttributesModification?: boolean;
    onceOnly?: boolean;
    existing?: boolean;
}

interface Document {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}

interface JQuery {
    arrive(selector: string, options: ArriveOptions, callback: Function): JQuery;
    arrive(selector: string, callback: Function): JQuery;
    unbindArrive(): JQuery;
    unbindArrive(selector: string): JQuery;
    unbindArrive(callback: Function): JQuery;
    unbindArrive(selector: string, callback: Function): JQuery;
    unbindAllArrive(): JQuery;
    leave(selector: string, options: LeaveOptions, callback: Function): JQuery;
    leave(selector: string, callback: Function): JQuery;
    unbindLeave(): JQuery;
    unbindLeave(selector: string): JQuery;
    unbindLeave(callback: Function): JQuery;
    unbindLeave(selector: string, callback: Function): JQuery;
    unbindAllLeave(): JQuery;
}

Answer 3

已经发布的解决方案似乎已经过时，因为 import "exports... 不再起作用或缺少某些信息。

无论如何，我的解决方案是首先通过添加类型定义

npm install --save @types/arrive

然后使用ES6 import style 导入相关ts 文件中的类型

import 'arrive';

最后像使用 Arrive.js 一样

document.getElementsByClassName(".my-element")[0].arrive(...)