如何通过 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 });

我已经为 arrivejs 制作了自己的界面。我最近添加了 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;
}

有什么办法可以实现吗？我已经用了几个小时了..

更新：我想把 arrive 和其余的放在 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。来自文档：

The library does not depend on jQuery, you can replace jQuery elements in the examples below with pure javascript elements and it would work fine.

Answer 2

对于因我的特殊情况（ES6、Typescript、webpack）而苦苦挣扎的任何人，我必须将其添加到 arrive.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 上对我的支持。他的回答也很有道理，只是与我的问题没有直接关系。

作为奖励，这是我的打字稿定义的样子。我还没有用它进行 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(...)

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

How do I import a jQuery plugin via webpack and put it under $/jQuery? (ES6 + TypeScript)

import

jquery-plugins

node.js

typescript

ecmascript-6