关于3.8.2开发问题和插件疑问

Creator 3.x
#1

  • Creator 版本： 3.8.2

  • 目标平台： google浏览器

开发问题

  • 一、使用import导入库时，在开发环境浏览器打开正常使用，在build后没有将库一起打包导致变量报错undefined
//复现代码：在调用的任意ts文件使用
import 'tools-javascript'

console.log(http)
  • 二、配置~为指定目录后无法正常编译通过，怎么配置使其正常工作
//tsconfig.json
{
  /* Base configuration. Do not edit this field. */
  "extends": "./temp/tsconfig.cocos.json",
  /* Add your custom configuration here. */
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, // 需要开启
    "paths": {
        "~/*": ["./assets/script/*"]
    }
  }
}

//使用时存在文件assets/script/utils/HttpUtils.ts
//配置前使用
import HttpUtil from './assets/script/utils/HttpUtil'
//配置后使用以下代码出现报错，vscode中不报错
import HttpUtil from '~/utils/HttpUtil'

插件疑问：

  • 一：怎么对修改代码后的preview进行hook？
  • 二：怎么对编辑器读取的ts内容进行修改返回给cocos creator编译，生命周期应该就是：编译前hook、读取资源hook（这里将读取到的代码和所有资源回调给插件进行自定义处理，处理完将buffer或者string返回）、编译后hook等官网的生命周期。。。，类似rollup前端插件的transform
//rollup插件代码，在cocos插件中我目前没找到能拿到读取到的ts代码进行修改
//如果能拿到其实我也可以根据tsconfig.json将'~/utils/HttpUtil'替换为正确的'./assets/script/utils/HttpUtil'给cocos creator编译


//插件代码：
        {
            transform(code, id, options) {
                
                if (id.indexOf('Main.ts') != -1) {
                    code = code.replace('#dev','pro')
                    return code
                }

            },
        }

//vscode写的Main.ts代码：
import * as cc from 'cc'
const { ccclass } = cc._decorator

@ccclass
export default class Main extends cc.Component {
    onLoad() {
        const test = '#dev'
    }

}

//通过cocos creator build或者preview后插件处理的Main.ts代码，此时的#dev被插件替换为了pro：
import * as cc from 'cc'
const { ccclass } = cc._decorator

@ccclass
export default class Main extends cc.Component {
    onLoad() {
        const test = 'pro'
    }

}

还是挺希望支持这个插件的功能的，也可能存在但是我没找到怎么处理的示例或者使用方法，如果可以支持，连默认的build-templates都可以通过这种方式进行修改，在任何一个生命周期中实现内容添加和删除，还有preview和build的环境配置切换，以上

#2

顶一下，希望有大佬能看到

#3

顶一下，希望有大佬能看到

#4

顶一下，希望有大佬能看到

#5

抱歉。我们目前还没有开放脚本编译阶段的 hook 给上层的计划。

如果是开发环境的区别处理，可以考虑有内建的常量来控制：

        if (PREVIEW) { // 开发阶段，浏览器预览
            console.log(`preview....`);
        } else {
            console.log(`not preview ....`);
        }

        if (EDITOR) { // 开发阶段，编辑器场景中执行
            console.log(`editor ....`);
        } else {
            console.log(`not editor ....`);
        }

        if (DEV) { // 开发阶段，包含预览与编辑器场景中执行
            console.log(`dev ....`);                
        } else {
            console.log(`not dev ....`);                            
        }

        if (BUILD) { // 发布
            console.log(`build ....`);                
        } else {
            console.log(`not build ....`);                
        }
#6

谢谢回复，了解