• v3.6.12の構築方法について説明しています。なるべくバージョンアップに合わせる形でこの資料も更新しますが追いつけない場合があります。
• 開発環境の構築で問題が起きた場合はどのようにして起きたか、今実行している環境の情報を含めてIssueにどうぞ。

Node.js をご用意ください。バージョンは 14.x系で開発することを想定しています。

この開発環境の構築についてはコマンドプロンプトまたはターミナルの利用がメインとなります。

WWA WingはTypeScriptで記述されており、数多くの変数やクラス、型などの参照関係により成り立っています。これらの定義を探しやすくなる コードジャンプ機能 が付いているエディタのご利用がおすすめです。

• Visual Studio Code
• WebStorm (有料, 学生の場合はアカデミックライセンスにより無償で利用可)

ただし、慣れているテキストエディタがある場合はそのエディタでも構いません。

リポジトリをクローンして、開発に必要なファイルを整えます。 また、記載されているリポジトリのURLは SSH鍵を登録した形で実行することを前提 としています。HTTPSによるリポジトリのクローンもできますが、クローンの際にGitHubのIDとパスワードが尋ねられます。

# リポジトリをクローンしてください
$ git clone git@github.com:WWAWing/WWAWing.git
# クローンしたリポジトリのディレクトリに入ります
$ cd WWAWing

WWA Wingで必要とされている npm パッケージを調達します。

# 依存しているライブラリをインストールします
$ npm install
# その後、各種ソースのコンパイルが自動で実行されます

これで開発環境の構築は終了になります。

• 💡 うまく動作しない場合は npm run bootstrap や npm run bootstrap:no-hoist の実行も検討してください(ただし、 no-hoist 付きは消費されるディスク容量は増えます)。

下記コマンドを実行した後に localhost:3000 にアクセスすると、デバッグ用のページが表示されます。

# ビルドします
$ npm run build
# 開発用のサーバを起動します (内部的にengine ディレクトリ下での npm startが呼び出されます。)
$ npm start

packages/engine/src ディレクトリ内にソースファイルが配置されています。このソースファイルを編集、保存すると 自動でコンパイルされます 。ページをリロードすると編集後の状態でWWA Wingが起動されます。

なお、 packages/engine 以外のソースファイルを上書き保存しても、自動でコンパイルはされません。反映したい場合は下記の実行が必要です。

# 編集したパッケージを再度ビルドし、開発用のサーバに反映するようにします。
$ npx lerna run build --scope=@wwawing/(編集したパッケージ名)