BlocklyGame （编译方法）分析

小灰灰 2022-05-14 11:43 606阅读 0赞

先列出以下几个位置：（本人用的是linux）

### BlocklyGame源码位置 ###

[https://github.com/google/blockly-games][https_github.com_google_blockly-games]

获取源码

git clone https://github.com/google/blockly-games
    cd blockly-games-master

### 载编译好的BlocklyGame ###

![70][]

[https://github.com/google/blockly-games/wiki/Offline][https_github.com_google_blockly-games_wiki_Offline]

### 当被编译出现问题时可以查看下面的网址，进行解决 ###

[https://github.com/google/blockly-games/issues][https_github.com_google_blockly-games_issues]

### 安装JDK,python3.5（前提安装了make，gcc等工具  ） ###

自己可以从网上找。也可以参考[https://blog.csdn.net/xiatiancc/article/details/78932848][https_blog.csdn.net_xiatiancc_article_details_78932848]

懒人安装：该命令将安装一堆新包，包括gcc，g ++和make。

sudo apt install build-essential

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

# **正文** #

makefile中一共有两个主要执行应用分别对应命令make deps, make language.

以及三个小应用make clean,make clean-languages,make clean-deps

## （一）make deps的准备工作 ##

make deps执行的是 makefile 这个文件。 获得整个项目中所需要的第三方依赖（如Colsure，Blockly等）

进入主文件blockly-games-master，即文件makefile所在的目录。通过make deps，得到并构建项目所需要的依赖，比如.soy文    件所需要的Closure模板

### （1）在blockly-games-master目录下，下载build文件夹 ###

①先现在SVN（已经安装过的忽略）

apt install subversion

②下载build

svn checkout https://github.com/google/closure-library/trunk/closure/bin/build build

### （2）执行  make deps命令 ###

make deps

返回信息：

mkdir -p third-party  
cd third-party; \\  
svn checkout https://github.com/google/closure-library/trunk/closure/bin/build build; \\  
wget -N https://dl.google.com/closure-templates/closure-templates-for-javascript-latest.zip; \\  
unzip -o closure-templates-for-javascript-latest.zip SoyToJsSrcCompiler.jar; \\  
unzip -o closure-templates-for-javascript-latest.zip -d ../appengine/third-party soyutils\_usegoog.js; \\  
wget -N https://dl.google.com/closure-templates/closure-templates-msg-extractor-latest.zip; \\  
unzip -o closure-templates-msg-extractor-latest.zip SoyMsgExtractor.jar; \\  
wget -N https://dl.google.com/closure-compiler/compiler-latest.zip; \\  
unzip -o compiler-latest.zip -x COPYING README.md; \\  
mv -f closure-compiler-v\*.jar closure-compiler.jar; \\  
chmod +x build/closurebuilder.py

…………………………

其主要的意思：

1.1.1、在同级目录，（即项目的根目录）创建第三方模块文件夹third-party 。

1.1.2、svn checkout https://github.com/google/closure-library/trunk/closure/bin/build build;使用svn下载。暂且不明白svn checkout命令

1.1.3、wget -N https://dl.google.com/closure-templates/closure-templates-for-javascript-latest.zip; 通过wget下载Closure模板

1.1.4、unzip -o closure-templates-for-javascript-latest.zip SoyToJsSrcCompiler.jar;将SoyToJsSrcCompiler.jar解压到当前目录

1.1.5、unzip -o closure-templates-for-javascript-latest.zip -d ../appengine/third-party soyutils\_usegoog.js; 将soyutils\_usegoog.js解压到appengine/third-party目录下。

1.1.6、wget -N https://dl.google.com/closure-templates/closure-templates-msg-extractor-latest.zip; 下载closure-templates-msg-extractor-latest.zip

1.1.7、unzip -o closure-templates-msg-extractor-latest.zip SoyMsgExtractor.jar; 解压出SoyMsgExtractor.jar

1.1.8、wget -N https://dl.google.com/closure-compiler/compiler-latest.zip;下载compiler-latest.zip;

1.1.9、unzip -o compiler-latest.zip -x COPYING README.md; 解压出README.md;

1.1.10、mv -f closure-compiler-v\*.jar closure-compiler.jar;将所有closure-compiler-v\*.jar的文件改名为closure-compiler.jar

chmod +x build/closurebuilder.py： 修改文件权限

### （3）最后在生成appengine/third-party ###

![70 1][]

下载的模块有：goog、third\_party\_goog、ace、blockly、SoundJS、midi-js-soundfonts下的guitar、piano、banjo、choir、choir、drum、trumpet、violin、还有JS-Interpreter。

最后将blockly下的msg/messages.js删除

这些模块的作用：

goog ： 提供了非常方便的前端和后端函数库，项目中主要用到了它的math下的方法。

third\_party\_goog ： 暂且不知

ace ： 暂且不知

blockly ： blockly模块

SoundJS ： 暂且不知

midi-js-soundfonts ： 提供了一些声音文件

JS-Interpreter ： 用于安全执行Blockly中的代码。

注意：到目前为止，项目已经完成所有第三方模块的加载，但是项目此时还不可以运行。只有通过make language后才能运行项目

# （二）make language #

如果你想单独对BlocklyGame项目下的某个子游戏进行语言编译，使用 make project-languages ,比如 make bird-en（见Makefile）

make language 主要做了三件事。

## 第一件事：为每个子项目创建appengine/generated/‘language’/路径 ##

language 为你所编译的语言，比如make enlanguage 为 make  en

make  en

编译一个项目

make index-en
    make puzzle-en
    make maze-en
    make bird-en
    make turtle-en
    make movie-en
    make music-en
    make pond-docs-en
    make pond-tutor-en
    make pond-duck-en
    make gallery-en

## 第二件事：编译.soy模板，模板被编译为soy.js文件 ##

## 第三件事： 执行build-app.py文件 ##

！common-en ： 暂且不知

以make en为例：

执行make en后会生成四个文件，

1、soy.js 第二件事生成的js文件

2、msg.js 第三件事生产的js文件

3、compressed.js 第三件事生产的js文件

4、uncompressed.js 第三件事生产的js文件

# （三）make clean-deps: 清除依赖 #

# （四）make clean-languages : 清除相关语言编译生成的文件（将appengine和子项目下的generated文件夹删除） #

# （五）make clean: make clean-deps，make clean-languages （这两个命令集合） #

[https_github.com_google_blockly-games]: https://github.com/google/blockly-games
[70]: /images/20220514/c97d747170284f228216223c5d8c13b6.png
[https_github.com_google_blockly-games_wiki_Offline]: https://github.com/google/blockly-games/wiki/Offline
[https_github.com_google_blockly-games_issues]: https://github.com/google/blockly-games/issues
[https_blog.csdn.net_xiatiancc_article_details_78932848]: https://blog.csdn.net/xiatiancc/article/details/78932848
[70 1]: /images/20220514/a202e0ef267245c68864e07b3e1e5303.png