web-dev-qa-db-ja.com

JavaScriptでソースファイルをインポート/インクルードする方法は？

可能性のある複製：
jsファイルを別のjsファイルに含める方法？

いくつかのJavaScriptソースファイルがあるとします：a.js、a1.js、およびa2.js。 a.jsの関数は、a1.jsおよびa2.jsから関数を呼び出します。

これらのファイルをHTMLページでall宣言する必要があります。 HTMLでa.jsだけを宣言し、a1.jsソースファイルでa2.jsとa.jsを "インポート/インクルード"したいと思います。

それは意味がありますか？ JavaScriptでそれを行うことはできますか？

javascriptclient-side
17
Michael

バニラJavaScriptではインポートを指定できません。

したがって、ソリューション（重いサーバー側フレームワークを除く）は次のとおりです。

  • 単にインポートを行います

  • jsファイルを連結します（そして、たとえば closure compiler を使用して、同じ移動でそれらを縮小します）

  • require.js のようなモジュールitoolを使用します

経験がない限り、ファイルの数が少ない（15未満）場合は、最初のソリューションまたは2番目のソリューションを選択することをお勧めします。モジュールローダーを使用すると、JavaScriptの学習を開始するときにデバッグしたくない副作用が生じる場合があります。

14
Denys Séguret

インポートできます：

<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>

jSから直接実行する場合は、Ajaxを使用できます。この投稿では、次の方法について説明します。 include-javascript-file-inside-javascript-file

9
Israelm

特定のツールを使用してJavaScript（およびCSS）ファイルをバンドルして、含める必要があるファイルの数を減らすことができます。これにより、ページの読み込みパフォーマンスも向上します。

これらのツールは、複数のJavaScriptファイルを単一のJavaScriptファイルに結合し（オプションでファイルを縮小することもできます）、複数のCSSファイルを単一のCSSファイルに結合します。これにより、ブラウザーからサーバーへのHTTP接続が少なくなるため、シリアルにフェッチする必要のあるものが少なくなります。

ASP.Net MVC 4には、これに対するサポートが組み込まれています。

http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/

Juicer のような他の環境のための多くのソリューションがあります。

すべてのリソースをバンドルできない場合（おそらく一部はCDNから提供され、その他はローカルで提供される場合）、 require.js などのロードマネージャーを使用できます。

2
Eric J.