【Blockly开发教程】01 初识Blockly

初心

近几年少儿编程一把火，基于 blockly、scratch 开发的软件也多如牛毛。笔者也参与 blockly/scratch3 相关开发工作 4 年多，虽然相关经历尚浅，但也希望将自己的经验，整理出一系列博文，让更多感兴趣的人参与进来。另一方面也通过整理、总结，做更深入的学习。

第一部分：先把 Demo 跑起来

我们不急于了解 Blockly 是什么，能做什么，我们先通过简单的方式，把 demo 跑起来，通过自己的操作，看到自己运行起来的 Blockly 页面。

准备

闲话不多说，我们先跑个 demo 看看。

开发基础工具

Blockly 项目是一个 Web 项目，使用了 git、nodejs、typescript、gulp、eslint、prettier 等工具。其中 git、nodejs工具需要我们先下载安装，其他工具/库，可以在后面安装依赖时获取。

基于 Blockly 源码仓库，2023-12 的版本需要使用nodejs版本是 "^18.18.0 || >=20.0.0"。笔者的电脑的 nodejs 版本是 v18.18.0。

• nodejs 下载

开发编辑器（IDE）

推荐使用微软的 vscode，支持安装各种插件，辅助提高开发效率和体验。

克隆代码

国内访问 github 比较吃力，网上有很多关于访问 github 以及 github 加速的文章，大家可以自行搜索。

笔者也在 gitee 码云上 fork 了一份，方便国内克隆: https://gitee.com/BrightLin/blockly，定期会同步官方源码库。大家如果在国内，可以使用下面的方式获取 Blockly 源码。

• Gitee 国内源

  默认分支 develop

  git clone https://gitee.com/BrightLin/blockly.git
  

• Github：Google Blockly （不推荐）

  git clone https://github.com/google/blockly.git
  

修改 npm 镜像源

打开项目目录里面的 .npmrc 文件，看到里面有一句：

registry=https://registry.npmjs.org/

.npmrc 文件是 npm 的配置文件，里面配置的 registry 是 npm 或 yarn 在下载依赖时，访问的域名。当你发现默认配置下载依赖很慢时，可以修改为国内镜像源：

• 修改 registry 为中国镜像源地址，这样在安装依赖时比较快。

registry=https://registry.npmmirror.com/

安装依赖

根据个人习惯，用 npm install 、yarn、pnpm install，或其他 nodejs 依赖管理工具进行依赖安装。

进入仓库目录（cd blockly/），然后安装依赖

npm install

# 你也可以使用：
yarn

你的 demo 跑起来了吗？

构建源码

运行程序之前，需要构建源码。我们可以打开仓库中的 package.json 看看有哪些指令：

"scripts": {
    "build": "gulp build",
    "build-debug": "gulp build --verbose --debug",
    "build-debug-log": "npm run build:debug > build-debug.log 2>&1 && tail -3 build-debug.log",
    "build-strict": "gulp build --verbose --strict",
    "build-strict-log": "npm run build:strict > build-debug.log 2>&1 && tail -3 build-debug.log",
    "build:compiled": "exit 1 # Deprecated; use \"npm run minify\" instead.",
    "build:compressed": "exit 1 # Deprecated; use \"npm run minify\" instead.",
    "build:js": "exit 1 # Deprecated; use \"npm run tsc\" instead.",
    "build:langfiles": "exit 1 # Deprecated; use \"npm run langfiles\" instead.",
    "clean": "gulp clean",
    "deployDemos": "npm ci && gulp deployDemos",
    "deployDemos:beta": "npm ci && gulp deployDemosBeta",
    "docs": "gulp docs",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "generate:langfiles": "exit 1 # Deprecated; use \"npm run messages\" instead.",
    "messages": "gulp messages",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "langfiles": "gulp langfiles",
    "minify": "gulp minify",
    "package": "gulp package",
    "postinstall": "patch-package",
    "prepareDemos": "gulp prepareDemos",
    "publish":