最新の構文を使用して jQuery を ES6 アプリケーションにインポートする方法

ES6 構文を使用した jQuery のインポート

ES6 ベースの JavaScript アプリケーションでは、コードベースをいくつか調整することで jQuery をインポートできます。

ES6 インポート ステートメント

jQuery をインポートするには、index.js ファイルで次の構文を使用します。

import {$, jQuery} from 'jquery';

{$, jQuery} を直接インポートすると、コード内で $ エイリアスと jQuery エイリアスの両方にアクセスできることを確認します。

ノード モジュールと Dist フォルダー

jQuery パッケージが存在する場所である、node_modules/ ディレクトリからインポートします。通常、Dist フォルダーは運用準備が整ったコードに使用され、ここからのインポートはビルド プロセスと一致しません。

グローバル変数の設定

アプリケーション内の他のスクリプトで jQuery を使用できるようにするには、次のようにします。これをウィンドウ オブジェクトに割り当てます。

window.$ = $;
window.jQuery = jQuery;

この手順により、ES6 モジュールの境界に関係なく、jQuery がグローバルにアクセスできるようになります。

サンプル コード

これは、 complete index.js:

import {$, jQuery} from 'jquery';

// Make jQuery globally available
window.$ = $;
window.jQuery = jQuery;

console.log($('div'));

これらの手順に従うことで、グローバル jQuery に依存する既存のスクリプトとの互換性を維持しながら、jQuery を ES6 アプリケーションに正常にインポートできます。

以上が最新の構文を使用して jQuery を ES6 アプリケーションにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。