Cocos Creator命令行构建方案!支持H5、微信、字节小游戏
共 5288字，需浏览 11分钟
·
2023-07-12 10:14
大家好，今天有请到『奶爸程序猿』为大家分享一篇 Cocos Creator 自动化构建方案，本文目录如下：
- 前言
- 创建TypeScript工程
- 构建web-mobile平台
- 优化流程
- 构建微信小游戏平台
- 构建字节小游戏平台
前言
自动化打包脚本已经写了两篇文章：
这次是第三篇，第一次我是用 shell 脚本写的，但是不通用。
然后又用 Nodejs 重构，但是感觉后续功能越来越多，引擎功能也越来越多，维护较为困难。
这次又在上层用 TS 进行了重构，并且重新整理了构建流程，方便后续的各种功能接入。
创建TypeScript工程
- 默认安装了 Nodejs 环境
- 创建自动化打包工程
# mac
mkdir build-system
# windows
md build-system
cd build-system
- 全局安装 typescript
npm install -g typescript
能运行 tsc 命令，则代表安装成功 3. 初始化项目工程
tsc --init
配置较多，可以看简化版本
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
- 这个时候，我们还无法在文件中使用 Node 相关的 API，所以我们还要安装 Node 环境
npm i -D @types/node
-
为了便于编译代码，我们可以设置下编译ts代码的命令,在
package.json中，添加如下代码
"scripts": {
"build": "tsc -b"
}
这个时候，我们用 npm run build 即可执行编译 ts 代码。
构建web-mobile平台
因为 web-mobile 相对流程较少，所以我们先以此平台为例，进行自动化构建，然后我们再继续更新微信小游戏和抖音小游戏平台的自动化打包。
Cocos Creator 3.x 在打包方面，优化了挺多的，相比于 2.x 需要设置诸多参数，3.x 仅需导出配置即可。
- 打开构建面板，配置好参数后，将配置导出到指定目录（可以自定义，建议与工程目录一起）
- 编写构建命令
const cmd = enginePath --project projectPath --build configPath=configPath;`
- 执行该命令
exec(cmd, null, (err)=>{});
- 注意，Cocos Creator 执行成功后的错误码是：36。
优化流程
相对而言 web-mobile 的构建相对简单，但是我们也不可避免的有自定义化的地方。
如果没有整合，后续增加就比较复杂，比如我需要把网页的标题修改下等，所以我们整合下流程，方便明天加入更多平台。
- 定义一个接口，表示构建流程，并创建多个平台脚本实现该接口
// PFInterface.ts
import { PackConfig } from "../const/Constants";
export interface PFInterface {
before(config: PackConfig): Promise<any>;
after(config: PackConfig): Promise<any>;
}
// WebPF.ts
import { PFInterface } from "./PFInterface";
import { PackConfig } from "../const/Constants";
export class WebPF implements PFInterface{
before(config: PackConfig){}
after(config: PackConfig){}
}
- 在构建前和构建后分别执行对应脚本
const pf = PlatformType.WEB === config.platform ? new WebPF() : xxx;
pf.befor(config);
// cmd命令
runSh(cmd);
pf.after(config);
- 比如，我们在web端集成了 Talkingdata，但不是每一个项目都有，如果加入，代码比如多，则可以通过宏裁剪，假设我们定义的宏为SDK_TALKINGDATA，则可以在命令执行前，根据配置设置宏，而无需打开编辑器每次确认是否开启与否
before(){
const engineCfgPath = join(projectPath, 'settings', 'v2', 'packages', 'engine.json');
const engineData = JSON.parse(readFileSync(engineCfgPath, 'utf-8'));
engineData.macroCustom = engineData.macroCustom || [];
let macro = ['SDK_TALKINGDATA'];
for(let i = 0; i < macro.length; i++){
let not = true;
for(let i = 0; i < engineData.macroCustom.length; i++){
if(engineData.macroCustom[i].key === macro[i]) {
engineData.macroCustom[i].value = config.SDK_TALKINGDATA || false;
not = false;
}
}
if(not) {
engineData.macroCustom.push({
key:macro[i],
value: false
});
}
}
writeFileSync(engineCfgPath, JSON.stringify(engineData));
return Promise.resolve();
}
构建微信小游戏平台
- 账号准备
操作微信小游戏工程，需要先加入白名单，参考开发者文档，在开发管理->开发设置->小程序代码上传中生成密钥和 IP 白名单。
- 部署 CI 工具
npm install miniprogram-ci --save
- 创建和上传
// 创建
const project = new ci.Project({
appid,
type: 'miniGame',
projectPath,
privateKeyPath
});
// 上传
ci.upload({
project,
version,
robot:1,
desc,
setting: {
es6: true,
es7: true,
minifyJS: true
},
onProgressUpdate: console.log,
});
- 此处注意，一般 Cocos 打包，需要把 es7 设置为 true
构建字节小游戏平台
- 账号准备
与微信不同，字节支持一个账号下管理（非创建）多个账号（理论是无数），所以抖音不需要配置密钥，仅需登录账号即可，因此把自己的账号加入后台权限即可。
- 部署命令行工具
npm install -g tt-minigame-ide-cli
- 登录账号
tmg login -e
回车后，输入邮箱及密码即可。
- 上传工程
tmg upload -v 版本号 -c 描述
工具下载
该工具开发者已经上架到 Cocos Store，开箱即用， 在此感谢大家的 捧场 。 如有 任何 需求或建议，欢迎 评论区留言。
- https://store.cocos.com/app/detail/4963
往期精彩