一殊轴、問題
在OPPO平臺嚎杨，要接入一個打點SDK蓄喇，渠道只提供了JS版本发侵，需要將部分JS代碼添加到main.js中。
二妆偏、使用構(gòu)建模板build-templates
參考自定義構(gòu)建模板
可以在build-templates放一個已經(jīng)添加過代碼的main.js刃鳄，每次打包后，覆蓋過去钱骂。但是叔锐，如果在構(gòu)建面板勾選了MD5緩存，每次的main.js實際上是動態(tài)變化的：
...
System.import('./application.45421.js').then(({ createApplication }) => {
...
這樣覆蓋過去的main.js见秽，如果MD5碼有變動愉烙，就會導(dǎo)致覆蓋錯誤。
解決辦法也有解取，就是打包完成后步责，不要改項目任何配置，緊接著再打包一次禀苦，這樣兩次打出來的包因為無任何變化蔓肯，實際上MD5碼是不變的。步驟如下：
- 第一次打包時振乏，清除build-templates目錄中的main.js
- 在第二次打包之前蔗包，使用gulp腳本把第一次打出來的main.js添加上JS代碼，然后復(fù)制到build-templates目錄中昆码，緊接著第二次打包气忠，就可以正確覆蓋過去了。
三赋咽、重新打包rpk
思路就是每次打包完旧噪，使用gulp腳本把要添加的代碼復(fù)制到main.js當(dāng)中，然后重新壓縮一個rpk放到dist路徑中脓匿。
參考OPPO 小游戲 rpk 打包方法淘钟，但是使用quickgame subpack重新打包時出現(xiàn)了錯誤
這里是打main分包時，部分COCOS代碼引用不到陪毡。這條路走不通米母，就只能在COCOS打包過程中想辦法了。
四毡琉、使用COCOS插件
1.官方文檔 第一個擴展
這個很好弄明白铁瞒。然后大概看了以下教程，發(fā)現(xiàn)對我解決問題幫助不大桅滋。
CocosCreator3D插件教程 插件小王子
B站制作插件視頻：
https://www.bilibili.com/video/BV1Ya411w7iA
https://www.bilibili.com/video/BV11z4y1k7aZ
https://www.bilibili.com/video/BV1Bt4y1Y7q3
https://www.bilibili.com/video/BV15p4y1z7YW
2.官方文檔 擴展構(gòu)建流程
在編輯器的菜單欄中點擊 項目 -> 新建構(gòu)建擴展包慧耍，得到cocos-build-template插件身辨。
接著參考插件里的readme：
自定義構(gòu)建插件模板使用指南
首先歡迎體驗自定義構(gòu)建插件功能，這是一份自定義構(gòu)建插件的簡單模板芍碧，里面寫了一些簡單的添加構(gòu)建配置以及自定義鉤子函數(shù)的代碼示例煌珊，更多的用法可以參考官方文檔。
基本使用流程
- 插件模板內(nèi)使用了一些
node模塊方法泌豆，目前在packages.json內(nèi)添加了插件支持的模塊types定庵，安裝后才能正常編譯通過以及得到更好的類型提示。
npm install
- 通過直接修改該文件夾內(nèi)的代碼踪危，編譯后蔬浙，再 擴展管理器 中找到對應(yīng)的構(gòu)建插件，然后點擊 重新載入 圖標(biāo)按鈕重啟插件即可贞远。
示例代碼使用 ts 編寫敛滋，在使用之前請先在當(dāng)前目錄下執(zhí)行 tsc 編譯代碼。如果直接在當(dāng)前文件夾內(nèi)修改使用兴革，可以執(zhí)行 tsc -w 監(jiān)聽編譯绎晃。
如果還不知道如何編譯代碼或者如何使用 ts 編寫，可以參考 TypeScript 的官方文檔杂曲。
在使用過程中有任何建議反饋庶艾，歡迎在論壇上和我們交流。
-
啟用插件后打開構(gòu)建插件面板擎勘，選擇任意平臺咱揍，即可看到構(gòu)建插件注入的新參數(shù)。
image.png
3.按照readme實踐中遇到的問題
- npm install失敗棚饵，此時建議使用cnpm install
- readme的package.json依賴如下：
"dependencies": {
"@types/electron": "^1.6.10",
"@types/fs-extra": "^5.0.4",
"@types/node": "^10.5.2"
}
如果需要切換node.js的版本煤裙，可以參考
使用nvm解決gulp ReferenceError: primordials is not defined
- 執(zhí)行tsc
使用npm install -g typescript安裝完ts,然后在cocos-build-template路徑下執(zhí)行tsc命令
node_modules/_electron@12.0.9@electron/electron.d.ts:6647:21 - error TS2694:
Namespace 'NodeJS' has no exported member 'Require'.
6647 require: NodeJS.Require;
~~~~~~~
Found 1 error.
這里我將dependencies中的node升級到12.1.0，還是無法解決噪漾。最后先使用cnpm install安裝fs-extra和node
"dependencies": {
"@types/fs-extra": "^5.0.4",
"@types/node": "^12.1.0"
},
然后再使用cnpm i --save electron@6.1.7完成安裝∨鹋椋現(xiàn)在再執(zhí)行tsc命令，終于可以編譯TS文件了欣硼。
- 當(dāng)我嘗試把官方文檔 第一個擴展中的console.log代碼移植到build插件中题翰，發(fā)現(xiàn)無法成功。最后把dist目錄中build.js改了一個名字就可以了诈胜，可見build.js是專門用來構(gòu)建使用的……
四豹障、在cocos-build-template插件中使用鉤子
1.測試一下各個鉤子
把Hook.ts中各個函數(shù)都加個console，然后在構(gòu)建時焦匈，打開console控制臺觀察一下：
比如：
function onBeforeBuild(options) {
return __awaiter(this, void 0, void 0, function* () {
// Todo some thing
console.log("xxxxxxxxxxxxxxxonBeforeBuild");
log(`${PACKAGE_NAME}.webTestOption`, 'onBeforeBuild');
});
}
注意血公，這里如果看不到，刷新擴展管理器是沒用的缓熟，可以重啟一下項目代碼試試累魔。
2.一分鐘學(xué)會 定制項目構(gòu)建流程
var path = require('path');
var fs = require('fs');
function onBeforeBuildFinish (options, callback) {
Editor.log('Building ' + options.platform + ' to ' + options.dest); // 你可以在控制臺輸出點什么
var mainJsPath = path.join(options.dest, 'main.js'); // 獲取發(fā)布目錄下的 main.js 所在路徑
var script = fs.readFileSync(mainJsPath, 'utf8'); // 讀取構(gòu)建好的 main.js
script += '\n' + 'window.myID = "01234567";'; // 添加一點腳本到
fs.writeFileSync(mainJsPath, script); // 保存 main.js
callback();
}
這里因為require的原因岩饼，我們就沒辦法在hooks.ts里引入path,fs了。這里參考 creator3.0薛夜， 引入js文件 require 不存在，怎么解決和 creator 3.0 如何使用js啊版述，仍然未得到解決梯澜。
所以只能在dist文件夾中直接改hooks.js文件。
var path = require('path');
var fs = require('fs');
function onAfterBuild(options, result) {
if(options.platform == "oppo-mini-game"){
console.log("xxxxxxxxxxxxxxxonAfterBuild i am oppo");
}
console.log("xxxxxxxxxxxxxxxonAfterBuild result", result.dest);
var mainJsPath = path.join(result.dest, '\main.js');// 獲取發(fā)布目錄下的 main.js 所在路徑
console.log("xxxxxxxxxxxxxxxmainJsPath", mainJsPath);
var script = fs.readFileSync(mainJsPath, 'utf8'); // 讀取構(gòu)建好的 main.js
console.log("xxxxxxxxxxxxxxxscript", script);
script += '\n' + 'window.myID = "01234567";'; // 添加一點腳本到
fs.writeFileSync(mainJsPath, script); // 保存 main.js
經(jīng)過測試渴析，上述代碼在3.01和3.1.0版本中可行晚伙，但是在3.0.0版本中不行，控制臺如下：
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Browserslist: caniuse-lite is outdated. Please run:
[Build] Browserslist: caniuse-lite is outdated. Please run the following command: `npx browserslist --update-db`
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] 構(gòu)建插件 cocos-build-template 的鉤子函數(shù) onBeforemake 執(zhí)行失敗俭茧，請檢查插件的代碼邏輯~
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] 構(gòu)建插件 cocos-build-template 的鉤子函數(shù) make 執(zhí)行失敗咆疗，請檢查插件的代碼邏輯~
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
[Build] 構(gòu)建插件 cocos-build-template 的鉤子函數(shù) onAftermake 執(zhí)行失敗，請檢查插件的代碼邏輯~
[Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
加了這個仍然不行
function onBeforeMake(root, options){
}
exports.onBeforeMake = onBeforeMake;
function onAfterMake(root, options){
}
exports.onAfterMake = onAfterMake;
function make(root, options){
}
exports.make = make;
