Scratch3 二次开发（1）

引言

贴吧之前有过 Sc2 的二次开发教程，但是 Sc3 就没有了。因此我决定开一贴，让大家都能开发出自己的 Sc3。同时我也会自己动手，试着弄出来一个编辑器。但是这个下载也太慢了吧！
ヾ(≧へ≦)〃

这个教程会先用比较专业的语言讲述，而且会默认一些知识是已知的。而如果某个点讲的模糊欢迎反馈，我会仔细讲解。这样懂的人可以不用看那么多废话，不懂的人最终也可以听懂。我才学疏浅，还望大家见谅！

首先，

Sc3 与 Sc2 程序上的一个不同，就是G仓库从一个变成多个了。一个完整的 Sc3 有如下 8 个部分：

• scratch-gui Sc3 编辑器的 GUI 界面，是引用其它部件的最上级包装层。这里有很多 React 的jsx代码。键盘处理是通过这边。如果想支持特殊按键，就从这里下手
• scratch-vm 虚拟机，也就是运行器。负责处理各种积木所做的事。如果想添加新的积木，从这里下手。
• scratch-render 舞台渲染器
• scratch-blocks 积木的样式输入框之类的都在这里。它是个 Google blockly 的 fork
• scratch-storage 上传你的sb3文件和图片由它处理
• scratch-paint，scratch-svg-renderer 用 jio 想都知道，它们分别是造型编辑器，svg 渲染器
• scratch-l10n 语言管理器。嗯，你可以在这里加上你的中二语言:stuck_out_tongue_winking_eye:

上述信息从scratch-gui的package.json一片段得来，众所周知它是大部分 Node.js 应用的入口文件：

// package.json
{
    // ...
    "main": "./dist/scratch-gui.js",
    // ...
    "scripts": {
        // ...
        "build": "npm run clean && webpack --progress --colors --bail",
    },
    "devDependencies": {
        // ...
        "scratch-audio": "0.1.0-prerelease.20190925183642",
        "scratch-blocks": "0.1.0-prerelease.1586372076",
        "scratch-l10n": "3.8.20200407213553",
        "scratch-paint": "0.2.0-prerelease.20200213174123",
        "scratch-render": "0.1.0-prerelease.20200409163640",
        "scratch-storage": "1.3.2",
        "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
        "scratch-vm": "0.2.0-prerelease.20200402182733",
    }
}

同时，可以看出scratch-gui的入口文件就是./dist/scratch-gui.js，顺藤摸瓜看到build脚本运行的是运行webpack。因此我们看一下 Webpack 配置文件./webpack.config.js。

// webpack.config.js
const base = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        host: '0.0.0.0',
        port: process.env.PORT || 8601
    },
    // ...
]
module.exports = [
    // ...
    // 自身运行的设置，指不作为包被引用时
    defaultsDeep({}, base, { // defaultsdeep 就是 lodash 中的一个方法，用处是合并 js 对象
        entry: {
            'lib.min': ['react', 'react-dom'],
            'gui': './src/playground/index.jsx',
            // ...
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name].js'
        },
        externals: {
            React: 'react',
            ReactDOM: 'react-dom'
        },
        plugins: base.plugins.concat([
            // ...
            new HtmlWebpackPlugin({
                chunks: ['lib.min', 'gui'],
                template: 'src/playground/index.ejs',
                title: 'Scratch 3.0 GUI',
                sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
            }),
        ]),
        // ...
    })
]
// ...

从此可见，在 bash 打入 npm build 就会打包React 和gui.jsx，然后从./src/playground/index.ejs模板创建HTML。然后你可以在localhost:8601看到结果✨。

准备工作

---

知识储备

低配版

• JavaScript基础
• Github
• bash或命令行

高配版，在低配的基础上，再加

• Node.js 和 Webpack
• JavaScript编程技巧
• HTML CSS 技术
• React
• …

所需工具

• 较新游览器（Chrome，Firefox等，IE不建议）

• 一个代码编辑器（VSCode，Sublime，Atom等）

• 较新的 Node.js 和 npm。

接下来的文章会讲到 Sc3 从下载 到运行 到拓展 到放弃 到发布。希望如此（咕咕咕~~先等我都下载完再说）