Scratch3.0 for Linux安装包制作

Scratch3.0 for Linux安装包制作

1 背景

上周家里小孩为了争着在电脑上学Scratch编程吵架，家里的台式机上安装有Scratch2。没办法，只能在笔记本上再安装一个Scratch。到官网上看了看，3.0版本发布了，不过只有Windows，Mac和Android版本。我的笔记本比较老旧，系统为Ubuntu16。后来网上搜了下，原来Scratch 3.0是开源的，可以自己下载源码编译。为了安装在我的老笔记本上，只能是自己动手制作Linux安装包了。

2 Scratch3介绍

Scratch是一个旨在通过块和卡通角色和场景向孩子们传授基本编程逻辑的环境。
Scratch 3.0新功能
用户可以使用各种新的精灵，背景和声音。
新的扩展库允许用户添加连接到硬件和软件组件的新的块集，以便使用Scratch执行更多任务
新的声音编辑器
新的编程块
支持平板电脑，因此Scratch 3.0中的块更大
用户可以添加开发人员称为“扩展”的额外块集合。

3 环境准备

操作系统: Ubuntu18.04
软件依赖：git node npm

 $git --version
 git version 2.17.1
 $node -v
 v12.14.1
 $npm -v
 6.14.5

4 下载源码

键入如下命令下载源码

 $git clone https://github.com/LLK/scratch-gui.git 
 正克隆到 'scratch-gui'...
 remote: Enumerating objects: 66, done.
 remote: Counting objects: 100% (66/66), done.
 remote: Compressing objects: 100% (48/48), done.
 收对象中:  19% (14538/74126), 69.41 MiB | 3.05 MiB/s
 $

进入源码路径

$cd scratch-gui

查看tag

$git tag | grep scratch-desktop
scratch-desktop-v3.10.0
scratch-desktop-v3.10.2
scratch-desktop-v3.11.0
scratch-desktop-v3.12.0
scratch-desktop-v3.3.0
scratch-desktop-v3.3.0-rc.1
scratch-desktop-v3.3.0-rc.2
scratch-desktop-v3.4.0-rc.1
scratch-desktop-v3.6.0
scratch-desktop-v3.6.0-rc.1
scratch-desktop-v3.7.0
scratch-desktop-v3.7.0-rc.1
scratch-desktop-v3.8.0
scratch-desktop-v3.8.0-rc.1
scratch-desktop-v3.9.0
$

这里我取版本scratch-desktop-v3.10.2

$git checkout scratch-desktop-v3.10.2

安装依赖

$npm install

修改WARN

$npm audit fix

5 编译

$BUILD_MODE=dist npm run build
编译完的目标路径为build

$ls build
326c5f98902ccd335b5b.worker.js      extension-worker.js.map
326c5f98902ccd335b5b.worker.js.map  index.html
blocks-only.html                    lib.min.js
chunks                              lib.min.js.map
compatibility-testing.html          player.html
extension-worker.js                 static

6 运行

运行需要一个Http服务,这里我们安装serve

$sudo node install serve -g

启动服务

$serve build
   ┌────────────────────────────────────────────────┐
   │                                                │
   │   Serving!                                     │
   │                                                │
   │   - Local:            http://localhost:5000    │
   │   - On Your Network:  http://10.2.16.26:5000   │
   │                                                │
   └────────────────────────────────────────────────┘

在浏览器中输入：http://localhost:5000后回车，将会出现Scratch3.0页面
其它平台上都是以App方式运行的，在Ubuntu下是不是也可以以App方式运行呢？
答案是肯定的，我们可以借助Electron将Scratch3.0包装成一个App。

7 App制作

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

7.1 创建工程

$cd ..
$mkdir  scratch
$cd scratch
$npm init
$

生成的package.json内容如下：

{
  "name": "scratch",
  "version": "3.10.2",
  "description": "Programming system and content development tool",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "flysnow",
  "license": "ISC"
}

7.2 安装Electron

$npm i -D electron

创建electron主文件

$touch index.js

输入内容如下：

const { app, BrowserWindow, Menu, screen } = require('electron')

Menu.setApplicationMenu(null)
function createWindow () {   
  // 创建浏览器窗口
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  const win = new BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('dist/index.html')

  // 打开开发者工具
  //win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

复制前面编译好的Scratch到dist路径

$cp ../scratch-gui/build ./dist -r

修改package.json如下：

{
  "name": "scratch",
  "version": "3.10.2",
  "description": "Programming system and content development tool",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "flysnow",
  "license": "ISC"
}

目录结构

$ls
dist  index.js  node_modules  package.json  package-lock.json

运行

$npm start

显示如下页面
下一步将Electron工程打包为可执行文件，并打包为安装包。

7.3 App打包发布

7.3.1 安装打包工具

electron打包我们采用electron-packager，安装命令如下：

$npm i -D electron-packager

在Ubuntu下安装包是deb格式，安装deb安装包制作工具：

$npm i -D electron-installer-debian

在package.json中scripts下增加package和deb命令：

{
  "name": "scratch",
  "version": "3.10.2",
  "description": "Programming system and content development tool",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . --out=out",
    "deb": "electron-installer-debian --src out/scratch-linux-x64/ --dest out/installers/ --arch amd64"
  },
  "author": "flysnow",
  "license": "ISC",
  "devDependencies": {
    "electron": "^9.1.0",
    "electron-installer-debian": "^3.1.0",
    "electron-packager": "^15.0.0"
  }
}

7.3.2 制作可执行程序包

$npm run package

> scratch@3.10.2 package /home/fuwenchao/g/scratch
> electron-packager . --out=out

Packaging app for platform linux x64 using electron v9.1.0
Wrote new app to out/scratch-linux-x64
$ls out/scratch-linux-x64
chrome_100_percent.pak  libffmpeg.so          LICENSES.chromium.html  snapshot_blob.bin
chrome_200_percent.pak  libGLESv2.so          locales                 swiftshader
chrome-sandbox          libvk_swiftshader.so  resources               v8_context_snapshot.bin
icudtl.dat              libvulkan.so          resources.pak           version
libEGL.so               LICENSE               scratch                 vk_swiftshader_icd.json

可以通过下面命令运行scratch

$./out/scratch-linux-x64/scratch

7.3.3 制作安装包

$npm run deb

> scratch@3.10.2 deb /home/fuwenchao/g/scratch
> electron-installer-debian --src out/scratch-linux-x64/ --dest out/installers/ --arch amd64

Creating package (this may take a while)
Successfully created package at out/installers/
$ls out/installers/
scratch_3.10.2_amd64.deb

7.3.4 测试安装包

$sudo dpkg -i out/installers/scratch_3.10.2_amd64.deb

到此安装包制作完毕
安装包URL: https://download.csdn.net/download/flysnow010/12587497