ソースコードを変更せずにCommonJSモジュールをブラウザーにロードする

一度、コンピューターの前に座って次の価値のないベンチャーを考えたとき、ブラウザー側とサーバー側で同じコードを使用する方法が必要であることに突然気付きました。 ほとんどすぐに、私はおそらくそれほど頭が良くないのが最初ではないことに気付きました。そして、すべてがずっと前に私のために発明されていました。



実際、私の要件については、たとえば、 Node.jsのアダプターを備えたRequireJS が素晴らしかったので、しばらくの間、気まぐれに出会うことができました。一つのプロジェクトで？ すべてを統一する必要があります！」



繰り返しになりますが、CommonJSモジュールには、あらゆる種類のスクリプトグルーア、サーバープリプロセッサ、同期ローダー、非同期のものなど、何百万ものブラウザ実装がありました。 しかし、それらすべてに1つの非常に重要な欠点があることが判明しました。 何らかの方法で、彼らはスクリプトのソースコードを変更し、ブラウザインスペクターのデバッグプロセスを非常に不便にしました。

思う

仕様によれば、各モジュールのグローバル名前空間は、モジュール自体の境界内でのみグローバルにある必要があります。 制限を超えてはなりません。 そのようなモジュールが変更されずにブラウザにロードされると、そのコードはグローバル名前空間で実行され、他のすべてのモジュールと共有されます。 これを避けるために、各モジュールのコードは通常関数にラップされ、この方法でのモジュール名前空間はローカルになります。



モジュールは、ブラウザにダウンロードする前にサーバー上で、またはブラウザ自体で関数にラップできます。 どちらの場合も、実行可能コードはソースとは異なるため、デバッグが困難になります。



私たちは他の方法で行きます。 このメソッドの本質は、各モジュールを個別のiframeにロードし、それによって他のモジュールから分離することです。 このような各フレームの名前空間では、CommonJS仕様の要件に従って、require関数とexportsおよびmodule.exportsオブジェクトが事前定義されます。



残念ながら、スクリプトをロードするこの方法には欠点がないわけではありません。 最初に出会ったのは、親ウィンドウのDOMやその他のグローバルオブジェクトを操作することの不便さでした。 それらにアクセスするには、面倒なwindow.parent.windowコンストラクトを使用する必要があります。さらに、将来的に生産用にモジュールを接着したい場合は冗長になります。 この問題の解決策は、何らかの方法で、各iframeにグローバルオブジェクトを作成することです。これは、親ウィンドウのウィンドウへのリンクになります。 このオブジェクトを介して、ウィンドウ自体、ドキュメント、ナビゲーター、履歴などのモジュールからアクセスでき、必要に応じてグローバル変数も使用できます。



2つ目は、一見するとそれほど明白ではありませんが、グローバルコンストラクター関数（クラス）のFunction、Date、Stringなどが同一でないことです。 さまざまなモジュールのコンテキストで。 これにより、たとえば、オブジェクトが別のモジュールで作成された場合、そのオブジェクトが組み込みクラスに属しているかどうかを確認できません。

var doSomething = require("./someModule").doSomething; // doSomething -  ,    someModule console.log(doSomething instanceof Function); // false,   Function    Function  someModule (    someFunction) -   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この問題を透過的に解決することは不可能であるため、コードで前述したものと同様の構造を使用しないことに同意する必要があります。 または、慎重に使用してください。 具体的には、この例では、関数がFunctionクラスに属しているかどうかのチェックを、たとえば次のように置き換えることができます。

 console.log(typeof doSomething === "function"); // true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CommonJSモジュールをブラウザーにロードしたい人にとって生活を困難にするもう1つのニュアンスは、CommonJSのrequire関数の同期的な性質です。 この問題を解決する最も一般的な方法は、目的のモジュールを同期AJAXリクエストでロードし、ダウンロードしたコードを評価するか、新しいFunction（）を使用して匿名関数を作成することです。 この場合、デバッガーは元のファイルのコード行を指すのを停止するため、この方法は適していません。 もう一度、他の方法を使用します。これにより、手付かずの容赦ない評価コードを通じて問題なくデバッガーを実行できます。



require関数は、基本的には、ロードされたモジュールによってエクスポートされるキャッシュされたmodule.exportsオブジェクトを返すだけです。 モジュール自体のコードは、モジュールを最初にロードしようとしたときにのみ実行されます。



上記を念頭に置いて、ちょっとしたトリックを見てみましょう。これらのモジュールが使用するコードが実行される前に、事前にモジュールをロードします。 この場合、すべてのモジュールのエクスポートをどこかにキャッシュし、そこから絶対同期関数requireがそれらを返します。



もちろん、この方法にも欠点がないわけではありません。 すべてのモジュールをプリロードするには、それらの識別子（名前）を正確に知る必要があります。 そしてこれは、このメソッドを使用すると、実行時に識別子が計算されるモジュールをプリロードできないことを意味します。 つまり、これを行うことはできません。

 var a = someRandomValue(); require("./module" + a);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それにもかかわらず、この問題を解決するために、モジュールの通常のAJAXローディングを使用し、そのような場合にevalを使用して、結果をすべて得ることができます。



モジュール内のコード実行の順序が、たとえばNode.jsの条件などと異なるという問題がまだあります。 2つの小さなモジュールを検討してください。

 //  "a" exports.result = doSomeExternalOperation();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //  "b" prepareDataForSomeExternalOperation(); var a = require("./a");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Node.jsでは、明らかに、prepareDataForSomeExternalOperation関数の呼び出しは、doSomeExternalOperation呼び出しよりも早く発生します（ただし、その前に他のrequire（ "./ a"）呼び出しがなかった場合のみ）。 私たちの場合、モジュールaはモジュールbの前にロードおよび実行されるため、すべてが逆になります。 残念ながら、この欠点にも我慢する必要があります。 しかし、公平に言うと、モジュールの正しい設計では、このような状況は発生しないはずです。 モジュールのメインコード（ファイルシステムやデータベースなど）で、他のモジュールの動作に暗黙的に影響を及ぼす可能性のある外部アクションを実行することは適切ではありません。



ここで、一般的に、そしてブラウザにモジュールをロードすることについて私が伝えたかったことすべて。 説明した方法が誰かにとって有用であると思われ、彼が彼の仕事でそれを使用することに決めた場合（良い、ここではすべてが基本的であり、実装に問題はないはずです）、私は非常に幸せです。



しかし、あなたが突然今何もすることがない場合、または単に興味がある場合-私の実装の詳細の説明へようこそ！

コディム

ソースはGithubで無料で入手できます。



このユーティリティをクラスの形式で設計することにしました。各インスタンスは独自の構成を持つ個別のアプリケーションになります（ただし、現時点では、構成全体は1行（すべてのスクリプトが配置されているパス）とモジュールキャッシュで構成されます）。

 function Comeon(path) { var self = this; self.path = path; self.modules = {}; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスには、単一のパブリック非同期関数、requireがあり、すべての依存関係でモジュールの実行を開始し、オプションでメインモジュールが終了してエクスポートパラメーターを受け取った後に呼び出されるコールバック関数を受け入れます。

 Comeon.prototype.require = function require(moduleRequest, callback) { var self = this; loadNextModule.bind(self)(enqueueModule.bind(self)(getModuleId("", moduleRequest)), callback); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つの主要で最も興味深い関数enqueueModuleとloadNextModuleを検討する前に、いくつかのヘルパー機能を検討します。



searchRequires関数は、パラメーターとしてモジュールファイルのURLを取得し、同期XHR要求でそれをロードし、その中のrequire関数への呼び出しの発生を探します。 ダウンロードしたコードを実行するのではなく、この関数を使用してモジュールの依存関係を探しているだけであるという事実に注意を喚起したいと思います。 モジュールファイルは、このダウンロード中にブラウザによってキャッシュされます。これは、後でこのモジュールを接続するときに役立ちます。

 var requirePattern = /(?:^|\s|=|;)require\(("|')([\w-\/\.]*)\1\)/g; function searchRequires(url) { var requires = []; var xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.onreadystatechange = function () { if ((xhr.readyState === 4) && (xhr.status === 200)) { var match; while ((match = requirePattern.exec(xhr.responseText)) !== null) { requires.push(match[2]); } } }; xhr.send(); return requires; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

getModuleIdおよびgetModuleContext関数は、それぞれモジュールへの識別子とパスを取得するために使用されます。

 function getModuleId(moduleContext, moduleRequest) { var moduleId = []; (/^\.\.?\//.test(moduleRequest) ? (moduleContext + moduleRequest) : moduleRequest).replace(/\.(?:js|node)$/, "").split("/").forEach(function (value) { if (value === ".") { } else if (value === "..") { moduleId.pop(); } else if (/[\w\-\.]+/.test(value)) { moduleId.push(value); } }); return moduleId.join("/"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function getModuleContext(moduleId) { return moduleId.slice(0, moduleId.lastIndexOf("/") + 1); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

require関数は、モジュールのコンテキストで、要求されたキャッシュされたエクスポートを返す関数です。 以前にアプリケーションインスタンスのコンテキストに固定し、現在のモジュールのパスを最初のパラメーターとして渡してから、各iframeをウィンドウに配置します。

 function require(moduleContext, moduleRequest) { var self = this; var moduleId = getModuleId(moduleContext, moduleRequest); if (self.modules[moduleId] && self.modules[moduleId].exports) { return self.modules[moduleId].exports; } else { throw Error("Module not found."); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、すべての主要な作業を実行する2つの機能を検討します。



再帰関数enqueueModuleは、パラメーターとして渡されたモジュールをキューに追加します。また、依存関係ごとに自分自身を呼び出して追加します。 その結果、モジュールロードキューを取得します。キューの最後には、メインモジュール（アプリケーションへのエントリポイント）があります。 このキューのおかげで、ダウンロード可能な各モジュールは、依存するすべてのキャッシュされたモジュールをすでに自由に使用できます。

 function enqueueModule(moduleId) { var self = this; var moduleQueue = []; if (!self.modules[moduleId]) { self.modules[moduleId] = { url: self.path + moduleId + ".js?ts=" + (new Date()).valueOf() }; moduleQueue.push(moduleId); searchRequires(self.modules[moduleId].url).forEach(function (value) { Array.prototype.push.apply(moduleQueue, enqueueModule.bind(self)(getModuleId(getModuleContext(moduleId), value))); }); } return moduleQueue; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

loadNextModule関数は、enqueueModule関数によって返されたキューを通過し、モジュールを順にブラウザーにロードします（依存関係を検索するために既にダウンロードしたため、ブラウザーはキャッシュからファイルを取得します）。 上記で合意したように、各モジュールを接続するために、グローバル変数、exportsおよびmodule.exports変数、およびrequire関数を作成する個別のiframeが使用されます。 次の各iframeは、前のスクリプトが完全にロードされた後にのみロードされます。 ダウンロードキューが終了すると、最初に渡されたコールバック関数（ある場合）を呼び出し、最後のモジュールのエクスポートをそこに転送します。

 function loadNextModule(moduleQueue, callback) { var self = this; if (moduleQueue.length) { var iframe = document.createElement("iframe"); iframe.src = "about:blank"; iframe.style.display = "none"; iframe.onload = function () { var moduleId = moduleQueue.pop(); var iframeWindow = this.contentWindow; var iframeDocument = this.contentDocument; iframeWindow.global = window; iframeWindow.require = require.bind(self, getModuleContext(moduleId)); iframeWindow.module = { exports: {} } iframeWindow.exports = iframeWindow.module.exports; var script = iframeDocument.createElement("script"); script.src = self.modules[moduleId].url; script.onload = function () { self.modules[moduleId].exports = iframeWindow.module.exports; if (moduleQueue.length) { loadNextModule.bind(self)(moduleQueue, callback); } else if (typeof callback === "function") { callback(self.modules[moduleId].exports); } }; iframeDocument.head.appendChild(script); }; document.body.appendChild(iframe); } else if (typeof callback === "function") { callback(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おまけとして、comeon.jsスクリプトを読み込んだ直後にアプリケーションを起動できる機能を追加します。

 var script = Array.prototype.slice.call(document.getElementsByTagName("script"), -1)[0]; var main = script.getAttribute("data-main"); if (main) { window.addEventListener("load", function () { var comeon = new Comeon(script.getAttribute("data-path") || "/"); comeon.require(main); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上です。 これで、ブラウザ側でCommonJS形式で記述されたモジュールを使用し、喜んでデビューすることができます。 これを行うには、comene.jsをスクリプトへのパスとデータ属性のメインモジュールの名前に接続するだけです。

 <script src="http://rawgithub.com/avgaltsev/comeon/master/comeon.js" data-path="scripts/" data-main="main"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、実行プロセス中に互いに独立した複数のモジュールを接続する必要がある場合、またはアプリケーションに複数のエントリポイントがある場合、より詳細な構文を使用できます。

 <script src="http://rawgithub.com/avgaltsev/comeon/master/comeon.js"></script> <script> window.onload = function () { var comeon = new Comeon("scripts/"); //   comeon.require("main"); //    comeon.require("another_main", function (exports) { console.log(exports); }); }; </script>