Cocos Creator命令行構建方案!支持H5、微信、字節(jié)小游戲

大家好，今天有請到『奶爸程序猿』為大家分享一篇 Cocos Creator 自動化構建方案，本文目錄如下：

• 前言
• 創(chuàng)建TypeScript工程
• 構建web-mobile平臺
• 優(yōu)化流程
• 構建微信小游戲平臺
• 構建字節(jié)小游戲平臺

前言

自動化打包腳本已經(jīng)寫了兩篇文章：

• 《一個針對CocosCreator自動化構建方案的實現(xiàn)》
• 《CocosCreator工程打包成aar》

這次是第三篇，第一次我是用 shell 腳本寫的，但是不通用。

然后又用 Nodejs 重構，但是感覺后續(xù)功能越來越多，引擎功能也越來越多，維護較為困難。

這次又在上層用 TS 進行了重構，并且重新整理了構建流程，方便后續(xù)的各種功能接入。

創(chuàng)建TypeScript工程

• 默認安裝了 Nodejs 環(huán)境

1. 創(chuàng)建自動化打包工程

      
      #?mac
mkdir?build-system
#?windows
md?build-system

cd?build-system

    

1. 全局安裝 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
??}
}

    

1. 這個時候，我們還無法在文件中使用 Node 相關的 API，所以我們還要安裝 Node 環(huán)境

      
      npm?i?-D?@types/node

    

1. 為了便于編譯代碼，我們可以設置下編譯ts代碼的命令,在package.json中，添加如下代碼

      
      ??"scripts":?{
????"build":?"tsc?-b"
??}

    

這個時候，我們用?npm run build?即可執(zhí)行編譯 ts 代碼。

構建web-mobile平臺

因為 web-mobile 相對流程較少，所以我們先以此平臺為例，進行自動化構建，然后我們再繼續(xù)更新微信小游戲和抖音小游戲平臺的自動化打包。

Cocos Creator 3.x 在打包方面，優(yōu)化了挺多的，相比于 2.x 需要設置諸多參數(shù)，3.x 僅需導出配置即可。

1. 打開構建面板，配置好參數(shù)后，將配置導出到指定目錄（可以自定義，建議與工程目錄一起）
2. 編寫構建命令

      
      const?cmd?=?enginePath?--project?projectPath?--build?configPath=configPath;`

    

1. 執(zhí)行該命令

      
      ?exec(cmd,?null,?(err)=>{});

    

• 注意，Cocos Creator 執(zhí)行成功后的錯誤碼是：36。

優(yōu)化流程

相對而言 web-mobile 的構建相對簡單，但是我們也不可避免的有自定義化的地方。

如果沒有整合，后續(xù)增加就比較復雜，比如我需要把網(wǎng)頁的標題修改下等，所以我們整合下流程，方便明天加入更多平臺。

1. 定義一個接口，表示構建流程，并創(chuàng)建多個平臺腳本實現(xiàn)該接口

      
      //?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){}
}?

    

1. 在構建前和構建后分別執(zhí)行對應腳本

      
      const?pf?=?PlatformType.WEB?===?config.platform???new?WebPF()?:?xxx;
pf.befor(config);
//?cmd命令
runSh(cmd);
pf.after(config);

    

1. 比如，我們在web端集成了 Talkingdata，但不是每一個項目都有，如果加入，代碼比如多，則可以通過宏裁剪，假設我們定義的宏為SDK_TALKINGDATA，則可以在命令執(zhí)行前，根據(jù)配置設置宏，而無需打開編輯器每次確認是否開啟與否

      
      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. 賬號準備

操作微信小游戲工程，需要先加入白名單，參考開發(fā)者文檔，在開發(fā)管理->開發(fā)設置->小程序代碼上傳中生成密鑰和 IP 白名單。

1. 部署 CI 工具

      
      npm?install?miniprogram-ci?--save

    

1. 創(chuàng)建和上傳

      
      //?創(chuàng)建
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

構建字節(jié)小游戲平臺

1. 賬號準備

與微信不同，字節(jié)支持一個賬號下管理（非創(chuàng)建）多個賬號（理論是無數(shù)），所以抖音不需要配置密鑰，僅需登錄賬號即可，因此把自己的賬號加入后臺權限即可。

1. 部署命令行工具

      
      npm?install?-g?tt-minigame-ide-cli

    

1. 登錄賬號

      
      tmg?login?-e

    

回車后，輸入郵箱及密碼即可。

1. 上傳工程

        
        tmg?upload?-v?版本號?-c?描述
      

工具下載

該工具開發(fā)者已經(jīng)上架到 Cocos Store，開箱即用， 在此感謝大家的 捧場 。 如有 任何 需求或建議，歡迎 評論區(qū)留言。

鏈接地址：

• https://store.cocos.com/app/detail/4963

往期精彩

• Creator 3.x 入門修煉指南(1/3)

• Creator 3.x 入門修煉指南(2/3)

• 游戲TA入門指南PDF免費送
  

• 微信小游戲構建發(fā)布指南

• Creator打包Android原生，如何配置構建環(huán)境？