ES6プラグインをjQueryプロトタイプに拡張する

Question

モジュールとクラスを使用してES6でjQuery（v2）のプラグインを変換できないため、助けてください。 ECMAScriptの5では

、我々は次のようにjQueryのプロトタイプにjQueryプラグインを添付することができます。

app.js - jQueryのHTML <script>タグ

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

経由でロードされ、それが動作します:)。

myPlugin.es6：

import $ from 'jquery'; 

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

app.es6：

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

$('div').myPlugin(); 

そして最後に、それは働いていない...
ES6では、私はこのような何かを書きます 私は検索しましたが、以前はこの質問をしていません。
私はBabelを使ってES6をES5に変換します。

Answer 1

$.fnは単なるオブジェクトです。 $のプロトタイプに新しいプロパティを追加すると魔法はありません。コード$.fn.myPlugin = function() {}は$.prototype.myPlugin = function() {}と同じです。

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

は、標準的な方法（$('div').func()）に$オブジェクトの関数を呼び出すことができるようにするには、$オブジェクトにこの機能を追加する必要があります。

あなたのes6コードには追加していません。

したがって、

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'; 

では

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

を意味するため、$.fnオブジェクトとmyPlugin機能との間に接続されていません。

接続をどこかに作成する必要があります。

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); 

それとも、myPlugin」にエクスポートされたオブジェクトに「初期化」メソッドを追加することができます。それはあなたが$.fnオブジェクトに必要なすべてのプラグインを注入うpluginsのような特別なモジュールである可能性があります。最初の使用の前にそれを呼んでください：init($) { $.fn.myPlugin = myPlugin; }

など。

Answer 2

いつものように、ES6のjQueryプロトタイプに新しいメソッドをインストールします。それらのために何も変わっていない。 jQueryをサブクラス化しないので、classまたはextendsを使用するのは意味がありません。

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

$.fn.myPlugin = function() { 
    … 
}; 

// app.es6: 
import $ from 'jquery'; 
import 'myPlugin.es6'; 

$('div').myPlugin();