当前位置： 首页 > backend >正文

本地部署Scratch在线编辑器

backend 2025/5/17 8:09:46

1、说明

由于在GitHub上没有找到Scratch源码，所以只能编写脚本下载官网相关资源，然后在本地部署。
如果你找到了Scratch源码，请自行编译部署，可忽略以下操作。
项目结构：scratch.mit.edu
|-- chunks
|   |-- fetch-worker.7a0adc94df277ffeb963.js
|   `-- static
|       `-- extension-assets
|           `-- scratch3_music
|               `-- 420991e0d6d99292c6d736963842536a.wav
|-- common.css
|-- css
|   `-- lib
|       `-- normalize.min.css
|-- favicon.ico
|-- http-server.go
|-- index.html
|-- internalapi
|   `-- asset
|       |-- 图片/音频文件
|-- js
|   |-- common.bundle.js
|   |-- polyfill.min.js
|   |-- projects.bundle-bak.js
|   |-- projects.bundle.js
|   |-- projects.intl.js
|   |-- splash.bundle.js
|   `-- splash.intl.js
|-- main-v1.go
|-- main-v2.go
|-- main-v3.go
|-- projects
|   `-- editor
|       `-- index.html
|-- projects.css
|-- session
|-- splash.css
`-- static|-- assets|   |-- 图片文件`-- blocks-media|-- default|   |-- dropdown-arrow.svg|   |-- green-flag.svg|   |-- repeat.svg|   |-- rotate-left.svg|   |-- rotate-right.svg|   |-- zoom-in.svg|   |-- zoom-out.svg|   `-- zoom-reset.svg`-- high-contrast|-- dropdown-arrow.svg|-- green-flag.svg|-- repeat.svg|-- rotate-left.svg|-- rotate-right.svg|-- zoom-in.svg|-- zoom-out.svg`-- zoom-reset.svg
go版本：go1.22.2执行go脚本命令：go run xxx.gogo脚本使用了代理来下载文件，如果不需要代理，直接使用go的http.Get来下载

2、下载index.html

手动下载以下文件，地址如下所示：https://scratch.mit.edu/projects/editor/index.htmlhttps://scratch.mit.edu/favicon.icohttps://scratch.mit.edu/css/lib/normalize.min.css
https://scratch.mit.edu/common.css
https://scratch.mit.edu/splash.csshttps://scratch.mit.edu/js/polyfill.min.js
https://scratch.mit.edu/js/common.bundle.js
https://scratch.mit.edu/js/splash.intl.js
https://scratch.mit.edu/js/splash.bundle.js如果需要其他资源，请手动继续下载

3、下载projects/editor/index.html

手动下载以下文件，地址如下所示：// 将index.html文件保存到projects/editor目录
https://scratch.mit.edu/projects/editor/index.html如果需要其他资源，请手动继续下载

main-v1.go文件

根据projects/editor/index.html文件内容，提取图片/音频链接，然后下载

package mainimport ("fmt""io""net/http""net/url""os""regexp""strings"
)func main() {// https://scratch.mit.edu/projects/editor/// 1、解析html文件fmt.Println("parse html start...")urls, err := parseHtml()if err != nil {fmt.Println("parse html err: ", err)return}if len(urls) == 0 {fmt.Println("none")return}fmt.Println("parse html end...")// 2、创建目录fmt.Println("create dir start...")createDir(urls)fmt.Println("create dir end...")// 3、下载fmt.Println("download start...")download(urls)fmt.Println("download end...")
}// 解析html
func parseHtml() ([]string, error) {filename := "projects/editor/index.html"f, err := os.Open(filename)if err != nil {return nil, err}defer f.Close()b, _ := io.ReadAll(f)s := string(b)hrefRule := `href="[^http](.*)"`srcRule := `src="[^http](.*)"`urlRes := make([]string, 0)hrefReg := regexp.MustCompile(hrefRule)hrefRes := hrefReg.FindAllStringSubmatch(s, -1)for _, v := range hrefRes {urlRes = append(urlRes, v[1])}srcReg := regexp.MustCompile(srcRule)srcRes := srcReg.FindAllStringSubmatch(s, -1)for _, v := range srcRes {urlRes = append(urlRes, v[1])}// fmt.Println(hrefRes)// fmt.Println(srcRes)// fmt.Println(urlRes)return urlRes, nil
}// 创建目录
func createDir(data []string) {m := make(map[string]bool)for _, v := range data {if _, ok := m[v]; !ok {arr := strings.Split(v, "/")s := strings.Join(arr[:len(arr)-1], "/")if len(s) == 0 {continue}if err := os.MkdirAll(s, 0666); err == nil {m[v] = true} else {fmt.Println("create dir err: ", err)}}}
}// 下载
func download(data []string) {for _, v := range data {s := fmt.Sprintf("%s%s", "https://scratch.mit.edu/", v)// resp, err := http.Get(s)req, _ := http.NewRequest(http.MethodGet, s, nil)req.Header.Add("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36")// 设置代理tr := &http.Transport{Proxy: http.ProxyURL(&url.URL{Scheme: "http",Host:   "127.0.0.1:7890",}),}client := &http.Client{Transport: tr,}// 发起http的get请求resp, err := client.Do(req)if err != nil {fmt.Println("http request err: ", err)continue}defer resp.Body.Close()// 读取内容b, err := io.ReadAll(resp.Body)if err != nil {fmt.Println("read body err: ", err)continue}// 写入文件err = os.WriteFile(v, b, 0666)if err != nil {fmt.Println("write file err: ", err)}}
}

main-v2.go文件

运行项目，发现部分资源缺失导致页面显示异常，需要下载缺失资源

package mainimport ("fmt""io""net/http""net/url""os""regexp""strings"
)// 启动项目后，发现部分资源缺失导致页面显示异常，需要下载以下资源
var links = []string{"chunks/fetch-worker.7a0adc94df277ffeb963.js",// "https://api.scratch.mit.edu/projects/undefined","static/blocks-media/default/zoom-out.svg","static/blocks-media/default/zoom-in.svg","static/blocks-media/default/zoom-reset.svg","static/blocks-media/default/dropdown-arrow.svg","static/blocks-media/default/green-flag.svg","static/blocks-media/default/repeat.svg","static/blocks-media/default/rotate-right.svg","static/blocks-media/default/rotate-left.svg","chunks/static/extension-assets/scratch3_music/420991e0d6d99292c6d736963842536a.wav","static/blocks-media/high-contrast/zoom-out.svg","static/blocks-media/high-contrast/zoom-in.svg","static/blocks-media/high-contrast/zoom-reset.svg","static/blocks-media/high-contrast/dropdown-arrow.svg","static/blocks-media/high-contrast/green-flag.svg","static/blocks-media/high-contrast/repeat.svg","static/blocks-media/high-contrast/rotate-right.svg","static/blocks-media/high-contrast/rotate-left.svg",
}func main() {// https://scratch.mit.edu/projects/editor/// 1、解析html文件// fmt.Println("parse html start...")// urls, err := parseHtml()// if err != nil {// 	fmt.Println("parse html err: ", err)// 	return// }// if len(urls) == 0 {// 	fmt.Println("none")// 	return// }// fmt.Println("parse js end...")// 2、创建目录fmt.Println("create dir start...")createDir(links)fmt.Println("create dir end...")// 3、下载fmt.Println("download start...")download(links)fmt.Println("download end...")
}// 解析html
func parseHtml() ([]string, error) {filename := "projects/editor/index.html"f, err := os.Open(filename)if err != nil {return nil, err}defer f.Close()b, _ := io.ReadAll(f)s := string(b)hrefRule := `href="[^http](.*)"`srcRule := `src="[^http](.*)"`urlRes := make([]string, 0)hrefReg := regexp.MustCompile(hrefRule)hrefRes := hrefReg.FindAllStringSubmatch(s, -1)for _, v := range hrefRes {urlRes = append(urlRes, v[1])}srcReg := regexp.MustCompile(srcRule)srcRes := srcReg.FindAllStringSubmatch(s, -1)for _, v := range srcRes {urlRes = append(urlRes, v[1])}// fmt.Println(hrefRes)// fmt.Println(srcRes)// fmt.Println(urlRes)return urlRes, nil
}// 创建目录
func createDir(data []string) {m := make(map[string]bool)for _, v := range data {if _, ok := m[v]; !ok {arr := strings.Split(v, "/")s := strings.Join(arr[:len(arr)-1], "/")if len(s) == 0 {continue}if err := os.MkdirAll(s, 0666); err == nil {m[v] = true} else {fmt.Println("create dir err: ", err)}}}
}// 下载
func download(data []string) {for _, v := range data {s := fmt.Sprintf("%s%s", "https://scratch.mit.edu/", v)// resp, err := http.Get(s)req, _ := http.NewRequest(http.MethodGet, s, nil)req.Header.Add("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36")// 设置代理tr := &http.Transport{Proxy: http.ProxyURL(&url.URL{Scheme: "http",Host:   "127.0.0.1:7890",}),}client := &http.Client{Transport: tr,}// 发起http的get请求resp, err := client.Do(req)if err != nil {fmt.Println("http request err: ", err)continue}defer resp.Body.Close()// 读取内容b, err := io.ReadAll(resp.Body)if err != nil {fmt.Println("read body err: ", err)continue}// 写入文件err = os.WriteFile(v, b, 0666)if err != nil {fmt.Println("write file err: ", err)}}
}

main-v3.go文件

根据js/projects.bundle.js文件内容，提取图片/音频链接，然后下载

package mainimport ("fmt""io""net/http""net/url""os""regexp""strings""sync"
)var ch chan string
var wg sync.WaitGroupvar defaultAssetPath = "static/assets" // 默认资源路径
var cdnAssetPath = "internalapi/asset" // cdn资源路径// 目录
var dirPaths = []string{defaultAssetPath,cdnAssetPath,
}// 域名
var domains = map[string]string{"default": "https://scratch.mit.edu/","cdn":     "https://cdn.assets.scratch.mit.edu/",
}func main() {// 1、解析js文件fmt.Println("parse js start...")data, err := parseJs()if err != nil {fmt.Println("parse js err: ", err)return}if len(data) == 0 {fmt.Println("none")return}fmt.Println("parse js end...")// 2、创建目录fmt.Println("create dir start...")createDir(dirPaths)fmt.Println("create dir end...")// 3、下载fmt.Println("download start...")download(data)fmt.Println("download end...")
}// 解析js文件中的图片/音频等资源链接
func parseJs() ([]string, error) {filename := "js/projects.bundle.js"f, err := os.Open(filename)if err != nil {fmt.Println("file open err: ", err)return nil, err}defer f.Close()b, _ := io.ReadAll(f)s := string(b)// static/assets/talking-3-say-something.en.8e5a33f8b13b50ff97fd.pngruleAssets := `(static\/assets\/[a-zA-Z0-9\.\-_]+\.[a-z]+)`regAssets := regexp.MustCompile(ruleAssets)resAssets := regAssets.FindAllStringSubmatch(s, -1)// md5ext:"cd21514d0531fdffb22204e0ec5ed84a.svg"ruleMd5 := `"md5ext":"([a-z0-9]+\.[a-z0-9]+)"`regMd5 := regexp.MustCompile(ruleMd5)resMd5 := regMd5.FindAllStringSubmatch(s, -1)m := make(map[string]bool) // 去重data := make([]string, 0)  // url链接for _, v := range resAssets {if _, ok := m[v[1]]; !ok {m[v[1]] = truedata = append(data, v[1])}}for _, v := range resMd5 {if _, ok := m[v[1]]; !ok {m[v[1]] = truedata = append(data, fmt.Sprintf("%s/%s", cdnAssetPath, v[1]))}}// fmt.Println(data)// fmt.Println(len(m))// fmt.Println(len(data)) // 未去重2661;去重1331m = nilresAssets = nilresMd5 = nilreturn data, nil
}// 创建目录
func createDir(data []string) {for _, v := range data {err := os.MkdirAll(v, 0666)if err != nil {panic(fmt.Sprintln("create dir err: ", err))}}
}// 下载
func download(data []string) {taskNum := 20ch = make(chan string, 5)for i := 0; i < taskNum; i++ {go task(ch)}for _, v := range data {ch <- vwg.Add(1)}wg.Wait()
}// 任务
func task(data chan string) {for {select {case msg := <-data:work(msg)wg.Done()}}
}// 下载文件
func work(filename string) {// 设置代理tr := &http.Transport{Proxy: http.ProxyURL(&url.URL{Scheme: "http",Host:   "127.0.0.1:7890",}),}client := &http.Client{Transport: tr,}// 发起http的get请求link := ""if strings.HasPrefix(filename, cdnAssetPath) {link = fmt.Sprintf("%s%s/get", domains["cdn"], filename)} else {link = fmt.Sprintf("%s%s", domains["default"], filename)}resp, err := client.Get(link)if err != nil {fmt.Println("http request err: ", err)return}defer resp.Body.Close()// 读取内容b, err := io.ReadAll(resp.Body)if err != nil {fmt.Println("read body err: ", err)return}// 写入文件err = os.WriteFile(filename, b, 0666)if err != nil {fmt.Println("write file err: ", err)}
}

4、编写http服务

如果不想编写http服务，也可以使用Nginx、OpenResty等Web服务器部署项目

js/projects.bundle.js文件

# 使用Linux的sed命令# 将 https://cdn.assets.scratch.mit.edu 替换为 http://127.0.0.1:8000（即替换为ip或域名）
sed -i 's/https:\/\/cdn.assets.scratch.mit.edu/http:\/\/127.0.0.1:8000/g' js/projects.bundle.js# 将 https://assets.scratch.mit.edu 替换为 http://127.0.0.1:8000（即替换为ip或域名）
sed -i 's/https:\/\/assets.scratch.mit.edu/http:\/\/127.0.0.1:8000/g' js/projects.bundle.js

http-server.go文件

package mainimport ("io""net/http""os""strings"
)/**
1、修改index.html文件（忽略这步操作）
window.location.pathname = '/projects/editor/';2、修改js/projects.bundle.js文件
# 使用Linux的sed命令# 将 https://cdn.assets.scratch.mit.edu 替换为 http://127.0.0.1:8000（即替换为ip或域名）
sed -i 's/https:\/\/cdn.assets.scratch.mit.edu/http:\/\/127.0.0.1:8000/g' js/projects.bundle.js# 将 https://assets.scratch.mit.edu 替换为 http://127.0.0.1:8000（即替换为ip或域名）
sed -i 's/https:\/\/assets.scratch.mit.edu/http:\/\/127.0.0.1:8000/g' js/projects.bundle.js
*/func main() {// http.Handle("/", http.FileServer(http.Dir("."))) // 文件服务器http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {p := r.URL.Path// fmt.Println(p)filename := strings.Trim(p, "/")if strings.HasPrefix(p, "/internalapi/asset") && (strings.HasSuffix(p, "/get/") || strings.HasSuffix(p, "/get")) {filename = strings.Trim(strings.TrimRight(filename, "get"), "/")p = filename}typ := "text/html"if p == "/" {filename = "index.html"} else if p == "/projects/editor/" || p == "/projects/editor" {filename += "/index.html"} else if p == "/session/" || p == "/session" {typ = "application/json"} else if strings.HasSuffix(p, ".ico") {typ = "image/x-icon"} else if strings.HasSuffix(p, ".js") {typ = "application/javascript"} else if strings.HasSuffix(p, ".css") {typ = "text/css"} else if strings.HasSuffix(p, ".svg") {typ = "image/svg+xml"} else if strings.HasSuffix(p, ".wav") {typ = "audio/x-wav"} else if strings.HasSuffix(p, ".png") {typ = "image/png"} else if strings.HasSuffix(p, ".jpg") {typ = "image/jpeg"}w.Header().Add("Content-Type", typ)f, err := os.Open(filename)if err != nil {w.WriteHeader(http.StatusBadRequest)w.Write(nil)return}b, _ := io.ReadAll(f)w.Write(b)})http.ListenAndServe(":8000", nil)
}

Nginx配置文件

# 如果使用Nginx服务器部署项目，nginx.conf配置文件增加下面这段server，内容如下：server {listen 80;server_name 域名; location / {# scratch项目路径root html/scratch.mit.edu;index index.html index.htm;}# 重写urllocation /internalapi/asset/ {root html/scratch.mit.edu;rewrite ^/internalapi/asset/(.*)/get[\/]* /internalapi/asset/$1 break;}
}

5、运行项目

# 运行项目
go run http-server.go

效果如下：

1）浏览器访问http://127.0.0.1:8000

2）点击创建，页面跳转到http://127.0.0.1:8000/projects/editor/?tutorial=getStarted

6、代码

https://gitcode.com/janthinasnail/scratch.mit.edu

7、详见

https://scratch.mit.edu/

https://scratch.mit.edu/projects/editor/?tutorial=getStarted

http://www.xdnf.cn/news/6749.html

相关文章：

  • Ngrok 配置：实现 Uniapp 前后端项目内网穿透
  • Recycling Krylov Subspace 方法解释与开源实现
  • 【Arthas实战】常见使用场景与命令分享
  • 电子电路：电容在电子电路中到底发挥着什么作用？
  • Unity 批量将图片从默认类型改为Sprite类型
  • 数字金融发展对商业银行信用风险的影响研究（stata分析范文）
  • 描述性统计图表
  • HC32L190 ADC采集
  • firewall防火墙
  • 前端方法的总结及记录
  • 隧道结构安全在线监测系统解决方案
  • 探秘雷克赛恩生产基地：解码国产投影技术深耕之路
  • 动态规划-63.不同路径II-力扣(LeetCode)
  • 操作系统知识总结
  • 丝杆升降机最大载荷的工程力学解析与选型实践
  • 懒汉式单例模式的线程安全实现
  • ros2中自定义的package查不到？
  • 事件响应策略规范模版
  • 基于Unity的简单2D游戏开发
  • [特殊字符] 如何优雅地避免 SQL 多表 LEFT JOIN 造成的笛卡尔积放大问题？
  • springboot连接高斯数据库(GaussDB)踩坑指南
  • 杰理ac696配置mic
  • 二水平设计的单次重复
  • 【Shell的基本操作】
  • jvm第一篇《内存与垃圾回收》学习笔记第一章jvm初始
  • 电平匹配电路
  • windows下找出时间大于某时间的附件
  • JavaScript - JavaScript 运算符之圆括号运算符与方括号运算符（圆括号运算符概述、圆括号运算符用法、方括号运算符概述、方括号运算符用法）
  • 最新开源 TEN VAD 与 Turn Detection 让 Voice Agent 对话更拟人 ｜ 社区来稿
  • [ linux-系统 ] 进程优先级 | Linux内核O(1)算法