Cocos 3.x 构建模板 向main.js添加代码

一、问题

在OPPO平台，要接入一个打点SDK，渠道只提供了JS版本，需要将部分JS代码添加到main.js中。

image.png

二、使用构建模板build-templates

参考自定义构建模板
可以在build-templates放一个已经添加过代码的main.js，每次打包后，覆盖过去。但是，如果在构建面板勾选了MD5缓存，每次的main.js实际上是动态变化的：

...
System.import('./application.45421.js').then(({ createApplication }) => {
...

这样覆盖过去的main.js，如果MD5码有变动，就会导致覆盖错误。

解决办法也有，就是打包完成后，不要改项目任何配置，紧接着再打包一次，这样两次打出来的包因为无任何变化，实际上MD5码是不变的。步骤如下：

• 第一次打包时，清除build-templates目录中的main.js
• 在第二次打包之前，使用gulp脚本把第一次打出来的main.js添加上JS代码，然后复制到build-templates目录中，紧接着第二次打包，就可以正确覆盖过去了。

三、重新打包rpk

思路就是每次打包完，使用gulp脚本把要添加的代码复制到main.js当中，然后重新压缩一个rpk放到dist路径中。

参考OPPO 小游戏 rpk 打包方法，但是使用quickgame subpack重新打包时出现了错误

image.png

这里是打main分包时，部分COCOS代码引用不到。这条路走不通，就只能在COCOS打包过程中想办法了。

四、使用COCOS插件

1.官方文档 第一个扩展

这个很好弄明白。然后大概看了以下教程，发现对我解决问题帮助不大。
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.官方文档 扩展构建流程

在编辑器的菜单栏中点击 项目 -> 新建构建扩展包，得到cocos-build-template插件。
接着参考插件里的readme：

自定义构建插件模板使用指南

首先欢迎体验自定义构建插件功能，这是一份自定义构建插件的简单模板，里面写了一些简单的添加构建配置以及自定义钩子函数的代码示例，更多的用法可以参考官方文档。

基本使用流程

• 插件模板内使用了一些 node 模块方法，目前在 packages.json 内添加了插件支持的模块 types，安装后才能正常编译通过以及得到更好的类型提示。

    npm install

• 通过直接修改该文件夹内的代码，编译后，再 扩展管理器 中找到对应的构建插件，然后点击 重新载入 图标按钮重启插件即可。

image.png

示例代码使用 ts 编写，在使用之前请先在当前目录下执行 tsc 编译代码。如果直接在当前文件夹内修改使用，可以执行 tsc -w 监听编译。

如果还不知道如何编译代码或者如何使用 ts 编写，可以参考 TypeScript 的官方文档。

在使用过程中有任何建议反馈，欢迎在论坛上和我们交流。

• 启用插件后打开构建插件面板，选择任意平台，即可看到构建插件注入的新参数。

  
  
  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

• 执行tsc
  使用npm install -g typescript安装完ts,然后在cocos-build-template路径下执行tsc命令

node_modules/[email protected]@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 [email protected]完成安装。现在再执行tsc命令，终于可以编译TS文件了。

• 当我尝试把官方文档 第一个扩展中的console.log代码移植到build插件中，发现无法成功。最后把dist目录中build.js改了一个名字就可以了，可见build.js是专门用来构建使用的……

四、在cocos-build-template插件中使用钩子

1.测试一下各个钩子

把Hook.ts中各个函数都加个console，然后在构建时，打开console控制台观察一下：

image.png

比如：

function onBeforeBuild(options) {
    return __awaiter(this, void 0, void 0, function* () {
        // Todo some thing
        console.log("xxxxxxxxxxxxxxxonBeforeBuild");
        log(`${PACKAGE_NAME}.webTestOption`, 'onBeforeBuild');
    });
}

image.png

注意，这里如果看不到，刷新扩展管理器是没用的，可以重启一下项目代码试试。

2.一分钟学会 定制项目构建流程

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');  // 获取发布目录下的 main.js 所在路径
    var script = fs.readFileSync(mainJsPath, 'utf8');     // 读取构建好的 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');// 获取发布目录下的 main.js 所在路径
    console.log("xxxxxxxxxxxxxxxmainJsPath", mainJsPath);
    var script = fs.readFileSync(mainJsPath, 'utf8');     // 读取构建好的 main.js
    console.log("xxxxxxxxxxxxxxxscript", script);
    script += '\n' + 'window.myID = "01234567";';         // 添加一点脚本到
    fs.writeFileSync(mainJsPath, script);                 // 保存 main.js

经过测试，上述代码在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] 构建插件 cocos-build-template 的钩子函数 onBeforemake 执行失败，请检查插件的代码逻辑~
  [Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
  [Build] 构建插件 cocos-build-template 的钩子函数 make 执行失败，请检查插件的代码逻辑~
  [Build] Cannot find module 'D:\CocosProject\Hello1\extensions\cocos-build-template\dist\web-hooks'
  [Build] 构建插件 cocos-build-template 的钩子函数 onAftermake 执行失败，请检查插件的代码逻辑~
  [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;