开发一个 Scratch3 Extension [Scratch3]

环境要求：

• Node
• Git

建议安装yarn webpack webpack-dev-server（不是必须的）

npm install -g yarn
npm install -g webpack
npm install -g webpack-dev-server

mkdir Scratch3
cd Scratch3

安装运行 scratch-gui

git clone https://github.com/LLK/scratch-gui
cd scratch-gui
npm install

运行webpack-dev-server --https，打开:https://127.0.0.1:8601/，可以在本地运行 Scratch 3.0 编辑器。

安装运行 scratch-vm

cd Scratch3
git clone https://github.com/LLK/scratch-vm
cd scratch-vm
yarn install
yarn link
yarn add uglifyjs-webpack-plugin
yarn run watch

# 新开一个shell
cd scratch-gui
yarn link scratch-vm

完成yarn link scratch-vm之后，scratch-gui 就会采用我们开发环境里的 scratch-vm，而不是默认的scratch-vm. 这样一来我们就可以定制 scratch-vm了。

编写插件

在scratch-vm/src/extensions目录创建scratch3_hello_world/index.js

这个文件目录和目录下的 index.js 就是插件在 scratch-vm 下的全部内容。

配置

将插件挂载到 scratch-gui 的插件区：编辑 scratch-vm/src/extension-support/extension-manager.js

增加

const Scratch3HelloWorldBlocks = require('../extensions/scratch3_hello_world');

const builtinExtensions = {
    helloWorld: Scratch3HelloWorldBlocks
};

编辑scratch-gui/src/lib/libraries/extensions/index.jsx

注意：scratch-gui 默认执行 npm run build，构建的 js 文件过大，需要将 webpage NODE_ENV 设为 production。可在package.json 里，将 scripts 的 build 命令加上 --mode production。如下：

"build": "npm run clean && webpack --progress --colors --bail --mode production",

建议将构建的文件放在对象存储，并开启 CDN 加速和 GZIP 压缩。

相关阅读：

https://blog.just4fun.site/create-first-Scratch3-Extension.html

https://github.com/webpack/webpack/issues/6460