Jsプロジェクトファイルを整理する

Question

私はいくつかの部分でコードを分割する必要があるhtml5ゲーム（私のmain.jsで500行に向かって航行する）を開発する時点です。私はすでに異なるvarsと関数を適切にグループ化し、これらのブロックをmain.js - game.js - player.js - enemy.js、eccなどに移動し、htmlから正しい順序で実行させました。それが正常に動作します

<script src="main.js"></script> 
<script src="game.js"></script> 
<script src="player.js"></script> 
<script src="enemy.js"></script> 

が、すべての変数がある。この方法は、コンソールからアクセス可能である：それはそれを分割する前だったように私は、今働いている主なファイルを「再構成」に私は個々のスクリプトを自己実行機能にラップして、これを防止しようとしましたが（現時点では私のmain.jsですが）、このアプローチでは、範囲外になるためにはグローバルにアクセス可能な変数が必要になります。この場合、ベストプラクティスは何ですか？私はたくさんのことを読んでいますが、私が見つけたすべての解決策は私のような小さなプロジェクトのために私のjsのスキルやあまりにも抽象的ではないようです。誰かが正しい方向を指すことができますか？

ありがとうございます。

Answer 1

あなたが質問で苦労しているようだ：How should I modularize my app?

の代わりにHTMLでアプリの各依存関係を定義する：

<script src="main.js"></script> 
<script src="game.js"></script> 
<script src="player.js"></script> 
<script src="enemy.js"></script> 

Webpack、Browserifyであなたのコードをバンドルする方が良いだろう、または他のモジュールバンドラを使用することができます。そうすれば、<script>タグの注文に心配する必要はありません。

あなたは、あなたのHTML内の1個の<script>タグを含めることができるだろう：bundle.jsはあなたの全体のアプリのコード、あなたが使用している可能性のあるサードパーティの依存関係を含むファイルです

<script src="bundle.js"></script> 

。上記のモジュールバンドラを使用することにより、bundle.jsを生成することができます。

選択したモジュールバンドラのサポートに応じて、CommonJS、AMD、ES6などのタイプのモジュールを使用することができます。コードにmodulesを設定すると、オブジェクト、関数などをエクスポートできます。グローバルな名前空間を汚染しません。これにより、あなたは1つの巨大なファイルからあなたのアプリを切り離すことができます。