CocosCreator自动化构建打包

游戏开发
留言

前言

自动化打包脚本已经写了两份了，这次是第三次，第一次是用shell写的，但是不通用，然后用nodejs重构了，但是感觉后续功能越来越多，引擎也越来越多，维护较为困难，这次又在上层用ts重构了，并且重新整理了构建流程，方便后续的各种功能接入。

创建TypeScript工程

  • 默认安装了nodejs环境
  1. 创建自动化打包工程
    1
    2
    3
    4
    5
    6
    # mac
    mkdir build-system
    # windows
    md build-system

    cd build-system
  2. 全局安装 typescript
    1
    npm install -g typescript
    能运行tsc命令，则代表安装成功
  3. 初始化项目工程
    1
    tsc --init
    配置较多，可以看简化版本
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "compilerOptions": {
        "target": "es2016",                                 
        "module": "commonjs",                                
        "outDir": "./dist",   
        "rootDir": "./src",                              
        "esModuleInterop": true,                            
        "forceConsistentCasingInFileNames": true,            
        "strict": true,                                      
        "skipLibCheck": true
      }
    }
  4. 这个时候，我们还无法在文件中使用node相关的api，所以我们还要安装node环境
    1
    npm i -D @types/node
  5. 为了便于编译代码，我们可以设置下编译ts代码的命令,在package.json中，添加如下代码
    1
    2
    3
    "scripts": {
      "build": "tsc -b"
    }
    这个时候，我们用npm run build即可执行编译ts代码。

构建web-mobile平台

因为web-mobile相对流程较少，所以我们先以此平台为例，进行自动化构建，然后我们再继续更新微信小游戏和抖音小游戏平台的自动化打包。
C3D在打包方面，优化了挺多的，相比于2.x需要设置诸多参数，3.x仅需导出配置即可

  1. 打开构建面板，配置好参数后，将配置导出到指定目录（可以自定义，建议与工程目录一起）
  2. 编写构建命令
    1
    const cmd = enginePath --project projectPath --build configPath=configPath;`
  3. 执行该命令
    1
    exec(cmd, null, (err)=>{});
  • 注意，cocos执行成功后的错误码是36

优化流程

相对而言，web-mobile的构建相对简单，但是我们也不可避免的有自定义化的地方，如果没有整合，后续增加就比较复杂，比如我需要把网页的标题修改下等，所以我们整合下流程，方面明天加入更多平台。

  1. 定义一个接口，表示构建流程，并创建多个平台脚本实现该接口
    1
    2
    3
    4
    5
    6
    7
    // PFInterface.ts
    import { PackConfig } from "../const/Constants";

    export interface PFInterface {
        before(config: PackConfig): Promise<any>;
        after(config: PackConfig): Promise<any>;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    // WebPF.ts
    import { PFInterface } from "./PFInterface";
    import { PackConfig } from "../const/Constants";

    export class WebPF implements PFInterface{
        before(config: PackConfig){}
        after(config: PackConfig){}
    }
  2. 在构建前和构建后分别执行对应脚本
    1
    2
    3
    4
    5
    const pf = PlatformType.WEB === config.platform ? new WebPF() : xxx;
    pf.befor(config);
    // cmd命令
    runSh(cmd);
    pf.after(config);
  3. 比如，我们在web端集成了Talkingdata，但不是每一个项目都有，如果加入，代码比如多，则可以通过宏裁剪，假设我们定义的宏为SDK_TALKINGDATA,则可以在命令执行前，根据配置设置宏，而无需打开编辑器每次确认是否开启与否
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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();
    }

构建微信小游戏平台

  1. 账号准备

操作微信小游戏工程，需要先加入白名单，参考开发者文档，在开发管理->开发设置->小程序代码上传中生成密钥和IP白名单

  1. 部署CI工具
1
npm install miniprogram-ci --save
  1. 创建和上传
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建
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

构建字节小游戏平台

  1. 账号准备

与微信不同，字节支持一个账号下管理（非创建）多个账号（理论是无数），所以抖音不需要配置密钥，仅需登录账号即可，因此把自己的账号加入后台权限即可。

  1. 部署命令行工具
1
npm install -g tt-minigame-ide-cli
  1. 登录账号
1
tmg login -e

回车后，输入邮箱及密码即可。

  1. 上传工程
1
tmg upload -v 版本号 -c 描述