Win10でのスクラッチwww環境構築の詳細チュートリアル

 scratch-www (scratch-gui web版) のインストールと操作方法

scratch-www は scratch-gui のウェブ版で、gui の作業の編集、保存、再生、表示などの機能を備えています。

scratch-www ダウンロード

ダウンロードアドレスは、https://github.com/LLK/scratch-www。公式サイトには、英語でのインストール手順が掲載されています。

ランタイム環境には

• nodejs 8.0以上、各種エラー報告の発生確率を下げるため最新版を推奨
• gitのインストール

npmのインストール

通常のnpmインストールは report an error npmをインストールするときに、よく引っかかるのが chromedriver このモジュールは、現在のクロームのバージョンは無効であり、指定されたバージョンのクローム（76.0.0）をダウンロードする必要があると促し、グーグルのウェブサイトにアクセスすることになり、一般にアクセスできないため、インストールに失敗する。

解決方法は

package.jsonファイルのdevDependenciesプロパティで、 "chromedriver": "76.0.0" という行を削除し、他のモジュールを先にnpm installし、chromedriverを別途installします。

Python 2.7 の欠落に遭遇したときの解決策としては

powershellに管理者権限でログインし、以下のコマンドを実行します。

npm install --global --production windows-build-tools

Pythonは時期が来れば自動的にダウンロードされます

以下の問題が発生しました。

"https://github.com/sass/node-sass/releases/download/v4.6.1/win32-x64-79_binding.node"、ダウンロードできません。

packpage.jsonの最初の部分を削除してください。

package.jsonファイルのdevDependencies属性に "node-sass": "4.6.1" 削除してください。その後

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

他のモジュールがインストールされたら、以下のコマンドを実行して

Install chromedriver

npm install --save-dev [email protected] --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

OK, npm install is done

packpage.jsonを修正します。

公式の scratch-www は Linux システム上でコンパイルされ、実行されます。

を変更します。 "clean": "rm -rf . /build && rm -rf . /intl && mkdir -p build && mkdir -p intl", rm -rf"は、Linuxでのみ使用可能なコマンドです。このコマンドは、buildフォルダとintlフォルダを削除し、再作成するために使用します。

rmコマンドの代わりに、rimrafを使用します。

npm i -g rimraf

に変更します。

"clean": "rimraf . /build && rimraf . /intl && mkdir build && mkdir intl"。

npm run build

npm start を直接実行する gui とは異なり、scratch-www はインストール後の初回実行時に npm start の前に npm run build を実行する必要があります。なぜなら、scratch-www は多言語の Web ページであり、言語ファイルを作成しないと正しく実行・表示されないからです。
npmがbuildを実行すると、buildフォルダとintlフォルダを削除し、リモートを翻訳して言語ファイルを取得します。 buildコマンドは以下のとおりです。

"build": "npm run clean &&npm run translate &&NODE_OPTIONS=-max_old_space _size=8000 webpack --bail",

以下のNODE_OPTIONSのエラーが発生した場合は、以下のように

set

"build": "npm run clean &&npm run translate &&set NODE_OPTIONS=-max_old_ space_size=8000 webpack --bail" です。

translate ディレクティブを使用します。

"translate:urls": "node . /bin/get-localized-urls localized-urls.json",
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]