古いバージョンのJavaScriptにはインポート、インクルード、または要求がなかったため、この問題に対するさまざまなアプローチが開発されてきました。
しかし、2015年（ES6）以降、JavaScriptには、Node.jsにモジュールをインポートするES6モジュール標準があり、ほとんどの最新のブラウザーでもサポートされています。。
古いブラウザとの互換性のために、WebpackやRollupなどのビルドツールやBabelなどのトランスパイレーションツールを使用できます。
ES6モジュール
ECMAScript（ES6）モジュールは、v8.5以降、フラグあり、および少なくともNode.js v13.8.0以降、フラグなしでNode.jsでサポートされています--experimental-modules。"ESM"（vs. Node.jsの以前のCommonJSスタイルのモジュールシステム["CJS"]）を有効にするには、で使用"type": "module"するpackage.jsonか、ファイルに拡張子を付け.mjsます。（同様に、.cjsデフォルトがESMの場合、Node.jsの以前のCJSモジュールで作成されたモジュールに名前を付けることができます。）
使用package.json：
{
"type": "module"
}
次にmodule.js：
export function hello() {
return "Hello";
}
次にmain.js：
import { hello } from './module.js';
let val = hello(); // val is "Hello";
を使用すると.mjs、次のようになりますmodule.mjs。
export function hello() {
return "Hello";
}
次にmain.mjs：
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
ブラウザーのECMAScriptモジュール
ブラウザは、 Safari 10.1、Chrome 61、Firefox 60、およびEdge 16 以降、 ECMAScriptモジュールの直接ロードをサポートしています（Webpackなどのツールは不要）。caniuseで現在のサポートを確認してください。Node.jsの.mjs拡張機能を使用する必要はありません。ブラウザはモジュール/スクリプトのファイル拡張子を完全に無視します。
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
続きを読む https://jakearchibald.com/2017/es-modules-in-browsers/をご覧ください
ブラウザーでの動的インポート
動的インポートにより、スクリプトは必要に応じて他のスクリプトをロードできます。
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
続きを読む https：//developers.google.com/web/updates/2017/11/dynamic-importをご覧ください。
Node.jsが必要
Node.jsでまだ広く使用されている古いCJSモジュールスタイルはmodule.exports/requireシステムです。
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
JavaScriptが、前処理を必要としないブラウザーに外部JavaScriptコンテンツを組み込む他の方法があります。
AJAXロード
AJAX呼び出しで追加のスクリプトをロードし、それを使用evalしてそれを実行できます。これは最も簡単な方法ですが、JavaScriptサンドボックスセキュリティモデルのため、ドメインに限定されます。を使用evalすると、バグ、ハッキング、セキュリティの問題への扉も開きます。
フェッチロード
ダイナミックインポートと同様にfetch、Fetch Injectライブラリを使用してスクリプトの依存関係の実行順序を制御するpromiseを使用して、1つまたは複数のスクリプトを呼び出しでロードできます。
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の読み込み
jQueryのライブラリの読み込み機能を提供します1行に：
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
動的スクリプトの読み込み
スクリプトURLを含むスクリプトタグをHTMLに追加できます。jQueryのオーバーヘッドを回避するために、これは理想的なソリューションです。
スクリプトは別のサーバーに置くこともできます。さらに、ブラウザはコードを評価します。<script>タグは、Webページのいずれかに注入することができる<head>、あるいは単に閉じる前に挿入</body>タグ。
これがどのように機能するかの例を次に示します。
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
この関数は<script>、ページのヘッドセクションの最後に新しいタグを追加します。ここで、src属性は、最初のパラメーターとして関数に指定されたURLに設定されます。
これらのソリューションは両方とも、「JavaScriptマッドネス：動的スクリプトロード」で説明および説明されています。
スクリプトがいつ実行されたかを検出する
今、あなたが知っておくべき大きな問題があります。これは、コードをリモートでロードすることを意味します。最新のWebブラウザーはすべてを非同期でロードしてパフォーマンスを向上させるため、ファイルをロードして現在のスクリプトを実行し続けます。（これは、jQueryメソッドと手動の動的スクリプトロードメソッドの両方に適用されます。）
つまり、これらのトリックを直接使用する場合、新しくロードされたコードは、ロードするように要求した後、次の行を使用できなくなります。
次に例を示しmy_lovely_script.jsますMySuperObject。
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
次に、ページヒットをリロードします F5。そしてそれはうまくいきます！混乱しています...
それでそれについて何をすべきか？
まあ、あなたが私があなたに与えたリンクで著者が提案するハックを使うことができます。要約すると、急いでいる人のために、彼はスクリプトが読み込まれたときにイベントを使用してコールバック関数を実行します。したがって、リモートライブラリを使用するすべてのコードをコールバック関数に配置できます。例えば：
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
次に、スクリプトがラムダ関数に読み込まれた後で、使用するコードを記述します。
var myPrettyCode = function() {
// Here, do whatever you want
};
次に、すべてを実行します。
loadScript("my_lovely_script.js", myPrettyCode);
DOMが読み込まれた後、またはその前に、ブラウザと行を含めたかどうかによって、スクリプトが実行される場合があることに注意してくださいscript.async = false;。これを説明する一般的なJavaScriptの読み込みに関する優れた記事があります。
ソースコードのマージ/前処理
この回答の冒頭で述べたように、多くの開発者はプロジェクトでParcel、Webpack、Babelなどのビルド/トランスパイレーションツールを使用して、今後のJavaScript構文の使用、古いブラウザーの下位互換性の提供、ファイルの結合、縮小、コード分割などを実行します