将 ES6 插件扩展到 jQuery 原型

我想寻求一些帮助，因为我无法使用模块和类在 ES6 中转换我的经典 jQuery (v2) 插件。

在 ECMAScript 5 中，我们可以将 jQuery 插件附加到 jQuery 原型中，如下所示：

app.js- 通过 HTML 加载 jQuery<script> tag

$.fn.myPlugin = function() {};
$('div').myPlugin();

它有效:)。在 ES6 中，我会这样写：

myPlugin.es6 ：

import $ from 'jquery';

export default class myPlugin extends $ {
 // Could i use constructor() method ???
}

应用程序.es6：

import $ from 'jquery';
import myPlugin from 'myPlugin.es6';

$('div').myPlugin();

最后，它不起作用......
我搜索过，之前没有人问过这个问题。
我使用 Babel 将 ES6 转译为 ES5。

$.fn只是一个对象。向原型添加新属性并没有什么神奇之处$。所以，代码$.fn.myPlugin = function() {}等于$.prototype.myPlugin = function() {}.

$.fn === $.prototype; // true

为了能够调用函数$以标准方式对象（$('div').func()），您需要将此功能添加到$ object.

您没有将其添加到 es6 代码中。

Thus,

import $ from 'jquery';

export default class myPlugin extends $ {
 // Could i use constructor() method ???
}

意思是（几乎）

var myPlugin = function() {};

myPlugin.prototype = Object.create($.prototype);

return { default: myPlugin };

我不确定您是否应该扩展 $.fn，但也许您需要它。

与

import $ from 'jquery';
import myPlugin from 'myPlugin.es6';

it means

var $ = require('jquery');
var myPlugin = require('myPlugin'); // a reference to the 'export.default' object from 'myPlugin.es6'

因此，两者之间不存在任何联系$.fn对象和myPlugin功能。

您应该在某处创建连接。它可能位于一个特殊的模块中，例如plugins您将在其中注入所有需要的插件$.fn object:

import $ from 'jquery';
import plugin1 from 'plugin1.es6'; // should contain 'name'
import plugin2 from 'plugin2.es6';
...
import plugin10 from 'plugin10.es6';

[plugin1, plugin2, ..., plugin10].forEach(plugin => $.fn[plugin.name] = plugin);

或者您可以将“initialize”方法添加到“myPlugin.es6”中导出的对象，并在首次使用之前调用它：init($) { $.fn.myPlugin = myPlugin; }

等等。