JavaScriptファイルを別のJavaScriptファイルに含めるにはどうすればよいですか?

2009年06月04日に質問されました。  ·  閲覧回数 3.4M回  ·  ソース

Alec Smart picture
2009年06月04日

別のJavaScriptファイル内にJavaScriptファイルを含めることができるCSSの@importに似たJavaScriptの何かがありますか?

回答

e-satis picture
2009年06月04日
4654

古いバージョンのJavaScriptにはインポート、インクルード、または必須がなかったため、この問題に対するさまざまなアプローチが開発されました。

しかし、2015年(ES6)以降、JavaScriptにはNode.jsにモジュールをインポートするためのES6モジュール標準があり、これはほとんどの最新のブラウザーでもサポートされてい

古いブラウザとの互換性のために、 WebpackRollupなどのビルドツールやBabelなどのトランスパイルツールを使用できます。

ES6モジュール

ECMAScript(ES6)モジュールは、v8.5以降、 --experimental-modulesフラグ付きで、および少なくともNode.js v13.8.0以降、フラグなしでNode.jsでサポートされています。 「ESM」(vs。Node.jsの以前のCommonJSスタイルのモジュールシステム["CJS"])を有効にするに"type": "module"package.json "type": "module"を使用するか、ファイルに拡張子.mjs 。 (同様に、デフォルトがESMの場合、Node.jsの以前のCJSモジュールで記述されたモジュールには.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を使用すると、バグ、ハッキング、セキュリティ問題への扉も開かれます。

フェッチ読み込み

動的インポートと同様に、Promiseを使用してfetch呼び出しで1つまたは複数のスクリプトをロードし、 FetchInjectライブラリを使用してスクリプトの依存関係の実行順序を制御できます。

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 Madness:Dynamic Sc​​riptLoadingで説明および図解されてい

スクリプトがいつ実行されたかを検出する

今、あなたが知っておくべき大きな問題があります。 これを行うことは、コードをリモートでロードすることを意味し

つまり、これらのトリックを直接使用すると、新しくロードされたコードはまだロードされているため、

例: my_lovely_script.jsMySuperObjectが含まれています:

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

スクリプトは、ブラウザと行script.async = false;を含めたかどうかに応じて、DOMが読み込まれた後、または前に実行される場合があることに注意してください。 これについて説明しているJavascriptの読み込み全般に関するすばらしい記事があります。

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

この回答の冒頭で述べたように、多くの開発者はプロジェクトでParcel、Webpack、Babelなどのビルド/トランスパイルツールを使用して、今後のJavaScript構文の使用、古いブラウザーの下位互換性の提供、ファイルの結合、縮小、コード分​​割などを実行します。

John Strickler picture
2012年06月08日
588

より高度なものをお探しの場合は、 RequireJSをお試しください。 依存関係の管理、同時実行性の向上、重複の回避(つまり、スクリプトの複数回の取得)などの追加の利点が得られます。

JavaScriptファイルを「モジュール」に記述し、それらを他のスクリプトの依存関係として参照できます。 または、RequireJSを単純な「このスクリプトを入手する」ソリューションとして使用することもできます。

例:

依存関係をモジュールとして定義します。

some-dependency.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.jsは、 some-dependency.jsに依存する「メイン」JavaScriptファイルです。

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

GitHub READMEからの抜粋:

RequireJSは、プレーンなJavaScriptファイルとより定義されたモジュールをロードします。 Web Workerを含むブラウザー内での使用に最適化されていますが、RhinoやNodeなどの他のJavaScript環境でも使用できます。 非同期モジュールAPIを実装します。

RequireJSはプレーンスクリプトタグを使用してモジュール/ファイルをロードするため、簡単にデバッグできるはずです。 単に既存のJavaScriptファイルをロードするために使用できるため、JavaScriptファイルを書き直すことなく既存のプロジェクトに追加できます。

..。

Kipras picture
2011年04月28日
210

実際に非同期ではなくJavaScriptファイルをロードする方法あるので、ロードした直後に新しくロードしたファイルに含まれている関数を使用することができ、すべてのブラウザーで機能すると思います。

ページの<head>要素でjQuery.append()を使用する必要があります。つまり、次のようになります。

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

ただし、この方法にも問題があります。インポートされたJavaScriptファイルでエラーが発生した場合、 Firebug (およびFirefoxエラーコンソールとChrome開発ツール)がその場所を誤って報告します。これは、Firebugを使用して追跡する場合に大きな問題です。 JavaScriptエラーがたくさんあります(私はそうします)。 Firebugは、何らかの理由で新しくロードされたファイルを認識しないため、そのファイルでエラーが発生すると、メインのHTMLファイルでエラーが発生したことが報告され、エラーの本当の理由を見つけるのに問題が発生します。

しかし、それが問題にならないのであれば、この方法でうまくいくはずです。

私は実際にこのメソッドを使用する$ .import_js()と呼ばれるjQueryプラグインを作成しました。

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

したがって、JavaScriptをインポートするために必要なのは次のとおりです。

$.import_js('/path_to_project/scripts/somefunctions.js');

また、でこれについて簡単なテストを行いました。

これは、 main.jsメインのHTML内のファイルを、その後でスクリプトmain.js使用しています$.import_js()呼ばれる追加ファイルをインポートするためにincluded.jsこの関数を定義します:

function hello()
{
    alert("Hello world!");
}

そして、 included.jsを含めた直後に、 hello()関数が呼び出され、アラートが表示されます。

(この回答はe-satisのコメントへの回答です)。

Ariel picture
2011年09月09日
164

別の方法は、私の意見でははるかにクリーンですが、 <script>タグを使用する代わりに、同期Ajaxリクエストを作成することです。 これは、 Node.jsがインクルードを処理する方法でもあります。

jQueryを使用した例を次に示します。

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

その後、通常インクルードを使用するのと同じように、コードで使用できます。

require("/scripts/subscript.js");

そして、次の行の必要なスクリプトから関数を呼び出すことができます。

subscript.doSomethingCool(); 
Imdad picture
2012年07月03日
109

あなたにとって良いニュースがあります。 間もなく、JavaScriptコードを簡単にロードできるようになります。 これは、JavaScriptコードのモジュールをインポートする標準的な方法になり、コアJavaScript自体の一部になります。

ファイルcond.jsからcondという名前のマクロをロードするには、 import cond from 'cond.js';を記述するだけです。

したがって、JavaScriptフレームワークに依存する必要も、明示的にAjax呼び出しを行う必要もありません。

参照する:

Svitlana Maksymchuk picture
2009年06月04日
104

JavaScriptタグを動的に生成し、他のJavaScriptコード内からHTMLドキュメントに追加することができます。 これにより、対象のJavaScriptファイルが読み込まれます。

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");
draupnie picture
2015年04月17日
78

ステートメントimportはECMAScript6にあります。

構文

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
Arnaud Gouder de Beauregard picture
2009年06月04日
64

このページで見つけたこの関数を使用できるかもしれませんJavaScriptファイルをJavaScriptファイルに含めるにはどうすればよいですか?

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}
heinob picture
2013年12月11日
56

これはjQueryのない同期バージョンです:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

このクロスドメインを機能させるには、サーバーが応答にallow-originヘッダーを設定する必要があることに注意してください。

nornagon picture
2010年01月23日
52

私はこのJavaScriptコードを書いたばかりです( DOM操作にプロトタイプを使用):

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

使用法:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

要旨: http