开发一个 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。如下:

"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

Comments
Write a Comment
  • 代码同步到不同机器里,都必须把vm重新install和link一下,否则会出错。