大家好，我是你的好朋友思创斯。网站金沙1005首页：https://ispacesoft.com
转载仅供个人学习，原文地址：
scratch 3.0建站指南（一）
scratch 3.0已经到来
scratch3.0 的用户界面发生了很大的改变，更便于使用和学习：
接下来的内容中我们就讨论一下如何针对scratch 3.0进行建站。
建站之本地环境准备：
1. 步骤一：在本地成功运行
2. 步骤二：编译gui项目
3. 步骤三：将项目部署到虚拟环境
在后边的章节我们将再讲一些关于生产环境部署，以及定制开发的内容。
scratch 3.0已经到来
scratch 3.0是下一代scratch。它是google的blockly项目的一个分支，采用html5而不是2.0版本使用的flash，随着h5技术逐渐发展，原本采用flash技术的已经逐渐在向h5转移，相对于flash来讲，h5在页面的装载速度上整体上会更快一些，另外，也相对较为省电。更为重要的是，flash对于移动端没什么办法，ios压根就不支持它。也因此，scratch 3.0是可以在手机和平板上运行的，因为h5需要的是javascript的支持，这在现代浏览器上都是没问题的，移动端也不例外，但确实还是有不支持的浏览器，那就是ie浏览器，但这也不是大问题，目前还在使用ie浏览器的比例已经很小了，微软在win10上采用新的内核开发了edge浏览器，也步入了现代浏览器的行列。
scratch 3.0是向下兼容的，因此原来2.0的项目在3.0上也是可以运行的，但从实际测试的效果来看，有些2.0的项目还是会让3.0崩溃的。
scratch3.0 的用户界面发生了很大的改变，更便于使用和学习：
可以在单个列表中滚动浏览所有块（所有类别）；
舞台从左边转移到了右边，这样编程操作会更为集中；
某些块（例如“指向方向”） 的输入方式变为更为直观，它会显示一个表盘让你拖动；
所有项目现在都以变量（称为“我的变量”）开头，以帮助初学者掌握；
笔块和音乐块现在是extensions，允许添加功能，同时简化基本块调色板；
颜色选择器块提供更多选项和控制，比如可以直接点选颜色；
所以说，不管是从架构还是从ui上，3.0都比2.0都有了很大的改变，如果计划采用scratch的，选择3.0是肯定的，如果已经采用了2.0的版本，我的建议是逐渐迁移到3.0上，不管怎么说，单单移动端可以运行的理由就足够了，跟不用说其他的一些新的功能比如声音控制scratch项目。
scratch2.0 有单机版，可以下载后安装使用，对于线下实体教授scratch的机构来说，还是比较方便，但scratch 3.0，它使用的是react js（facebook倡导的一种框架技术），是运行在浏览器中的，所以需要后端能够host scratch3.0的组件，在前端请求的时候可以提供服务。
有人会问，是否一定要建立一个网站，scratch官方是否提供在线scratch 3.0的版本，是的，scratch官方提供在线版本，现在有个beta版本供大家试用：https://beta.scratch.mit.edu/，
大家使用这个版本也是可以开展教学任务的，文件可以存放本地。
那么有了官方版本是否就不再需要自己再建设一个scratch 3.0的网站了？这个问题要看我们对于scratch 3.0的需求是怎样的，比如更高的效率（国外网站在第一次访问时会比较慢），是否需要品牌宣传，是否与学员体系整合，是否需要对学员的进度进行统一的管理，是否需要将作品保存在云端，是否需要将作品分享和转发等等。如果有这些定制化的要求，那么建站就是必须的了。
接下来的内容中我们就讨论一下如何针对scratch 3.0进行建站。
scratch 3.0采用的模块化的开发方法，大家可以在github上看到scratch 3.0的项目结构。https://github.com/llk
这里我们需要的scratch-gui这个项目，它负责最后的用户ui界面的呈现。
我们还需要一些技术的准备工作，这不是一份手把手的教程，需要您具备一些技术储备，大致我们会需要到git, node, webpack的一些基本知识，如果需要定制开发，还需要reactjs的功力，在部署的环节还需要一些linux方面的知识。
建站之本地环境准备：
1. 步骤一：在本地成功运行
scratch 3.0的项目都是开源的（感谢伟大的开源思想），在将scratch-gui的源码git 到本地后，依照readme的指示操作，经过一番努力后，你通过npm start，会启动一个本地的版本，严格来说是webpack作为一个web server来host了scratch 3.0的服务，通过localhost:8601，可以访问scratch 3.0的gui，这个gui与你访问到的官方的scratch 3.0基本上是一致的。
2. 步骤二：编译gui项目
我们需要通过webpack将整个gui项目进行编译、打包，通过npm run build指令，最后可以在build目录下打包整个项目文件，我们一般会看到如下几个文件，lib.min.js, gui.js, blocksonly.js, compatibilitytesting.js, player.js, index.html，以及一些静态资源文件在static目录下，在我们请求index.html文件时，会加载gui.js, gui.js依赖于lib.min.js，因此也会被同时加载，对于运行gui来说需要的是lib.min.js, gui.js, index.html和static目录资源
3. 步骤三：将项目部署到虚拟环境
你需要一个服务器来host它，可以使用virtual box或使用vagrant来创建一个虚拟服务器，服务器的操作系统可以采用centos，系统的配置就相对简单了，因为host的基本都是静态文件，当然，你还需要nginx或apache作为服务器代理来处理http的请求，因为在本地端的要求比较简单，所以，如果使用nginx的话，在default.conf配置一下location目录，将在步骤二打包的build目录下的文件全部copy到该目录下，这时你通过80端口来访问这台虚拟服务器就可以看到scratch 3.0的gui了。
在后边的章节我们将再讲一些关于生产环境部署，以及定制开发的内容。
———————
作者：fancy_kevin
来源：csdn
原文：https://blog.csdn.net/fancy_kevin/article/details/82754322
js555888金沙老品牌的版权声明：本文为博主原创文章，转载请附上博文链接！
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/5739.html
