Scratchローカル開発環境構築

実行環境

• OS: Windows 11
• CLI: PowerShell
• Node.js: 16.20.0
• npm: 9.7.1

セットアップ手順

1. Scratch-GUIのセットアップ:

   • npm install を実行。
   • babel-loader が不足している場合は、npm install -D babel-loader @babel/core @babel/preset-env webpack を実行。
   • npm start で起動。http://localhost:8601/ でアクセス可能。

2. Scratch-VMのセットアップ:

   • npm install を実行。
   • npm start で起動。http://localhost:8073/playground/ で動作確認。

3. VMとGUIの連携:

   • scratch-vm ディレクトリで npm link を実行。
   • scratch-gui ディレクトリで npm link scratch-vm を実行。
   • これにより、ローカルの scratch-vm の変更が scratch-gui に反映されるようになります。

トラブルシューティング

• フォルダが見つからないエラー: scratch-gui\src\generated\microbit-hex-url.cjs ファイル内のパス区切り文字（バックスラッシュ）が原因の可能性があります。

Tags: #Scratch #開発環境 #JavaScript