Web プロジェクトに JavaScript ファイルを含めるにはどうすればよいですか?

JavaScript ファイルの組み込み: @Import 以外

@import は外部スタイルシートを組み込むために CSS で一般的に使用されますが、JavaScript はネイティブに同様の仕組み。時間が経つにつれて、このニーズに対処するための多数の方法が登場しました。

ES6 モジュール (推奨)

2015 年以来、JavaScript は ES6 モジュールを採用し、インポートの標準化された方法を提供しています。モジュール。このアプローチは、ほとんどの最新のブラウザーと Node.js でサポートされています。

ES6 モジュールを利用するには、エクスポート関数を使用して module.js ファイルを作成します。

export function hello() {
  return "Hello";
}

別のファイルで、モジュールを作成し、その関数を使用します:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Node.js Require

Node.js の場合、従来のモジュール スタイルは module.exports/require システムです。

mymodule.js モジュールを作成します:

module.exports = {
   hello: function() {
      return "Hello";
   }
}

モジュールを別の場所で使用するfile:

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

AJAX Loading

AJAX リクエストを使用して、JavaScript スクリプトを動的にロードできます。ただし、セキュリティ上の制限により、この機能は同じドメインに限定されます。このようなスクリプトを実行するために eval を使用することは、潜在的なセキュリティ リスクのため推奨されません。

フェッチ ロード

動的インポートと同様に、フェッチ インジェクト ライブラリでは、フェッチ経由で複数のスクリプトをロードできます。を使用して実行順序を制御します

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery Loading

jQuery は、外部スクリプトをロードするための簡略化された方法を提供します。

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Dynamic Sc​​ript Loading

このテクニックこれには、目的の URL を含むスクリプト タグを作成し、それを HTML ドキュメントに挿入することが含まれます。

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

スクリプト実行の検出

スクリプトを非同期的にロードすると遅延が発生しますスクリプトが実行される前。スクリプトの読み込みが完了したことを検出するには、イベントベースのコールバック、または元の回答で提供されているリンクで提案されているアプローチの使用を検討してください。

ソース コードのマージ/前処理

Parcel、Webpack、Babel などの最新のビルド ツールは、複数の JavaScript ファイルを結合し、変換を適用し、ブラウザ間の互換性を提供できます。これにより、開発者は高度な JavaScript 機能を使用し、開発ワークフローを合理化できます。

以上がWeb プロジェクトに JavaScript ファイルを含めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。