开发一个 Scratch3 Extension [Scratch3]
2019-03-13
环境要求:
- 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
。如下:
建议将构建的文件放在对象存储,并开启 CDN 加速和 GZIP 压缩。
相关阅读:
Post TOC
代码同步到不同机器里,都必须把vm重新install和link一下,否则会出错。