[2.x+3.x]让你的TS/JS代码支持条件编译的插件: ifdef-creator

ifdef-creator | Cocos Store

功能介绍

让Creator中的ts和js代码支持条件编译, 构建发布时自动 注释 / 释放 对应的代码
同时支持Creator2.x(>=2.3.2)和Creator3.x(>=3.0.0)

使用场景

在不同的平台, 需要导入不同的库来实现某个功能, 但很多时候只能在代码里做平台的判断.

比如 TSRPC 虽然是一个跨平台模块, 但使用什么平台的实现, 却是需要代码控制

, 如:

import { BaseServiceType, ServiceProto } from 'tsrpc-proto';
import { BaseWsClient } from 'tsrpc-base-client';
import { WsClient as WsClientMiniapp } from 'tsrpc-miniapp';
import { WsClient } from 'tsrpc-browser';
import { sys } from 'cc';

/** Current Environment WebSocket Client implementation */
export function getWsClient<ServiceType extends BaseServiceType>(proto: ServiceProto<ServiceType>)
    :BaseWsClient<ServiceType>{
    if (sys.platform == sys.Platform.WECHAT_GAME) {
        return new WsClientMiniapp(proto, {});
    } else {
        return new WsClient(proto, {});
    }
}

代码判断平台有个坏处, Creator会将代码中所有引用到的模块都打包(即使逻辑上不会用到的), 导致包体大小会浪费!

条件编译就是为了解决这种问题, 让 选择 发生在 编译(构建发布) 之前. 使用本插件后, 代码如:


import { BaseServiceType, ServiceProto } from 'tsrpc-proto';
import { BaseWsClient } from 'tsrpc-base-client';
/// #if Miniapp
/// #code import { WsClient } from 'tsrpc-miniapp';
/// #else
import { WsClient } from 'tsrpc-browser';
/// #endif

export function getWsClient<ServiceType extends BaseServiceType>(proto: ServiceProto<ServiceType>)
    : BaseWsClient<ServiceType> {
    return new WsClient(proto, {});
}

然后在构建发布设置里配置预定义符号, 如图(Creator3.X版):

settings.png

构建发布后, Creator仅会打包当前平台下真正用到的代码

条件编译语法

语法格式为:

/// #关键字[ 表达式|源代码]

示例:


//简单使用的条件编译
/// #if Web
console.log("web环境");
/// #endif

/// #if Mobile
console.log("移动端环境");
/// #elif Desktop
console.log("桌面环境");
/// #endif

//组合条件表达式 + 条件嵌套 + 释放代码
/// #if Web && Mobile
///     #code var testMsg2 = "H5-防止语法错误可以把代码放到code语句块里";
///     #if SDK1
///         #code console.log("H5里定义了SDK1,本条日志写在#code语句段中");
///     #elif SDK2
console.log("H5里定义了SDK2");
///     #endif
/// #elif Web && Desktop
///     #code var testMsg2="PC网页-防止语法错误可以把代码放到code语句块里";
///     #if SDK1
///         #code console.log("PC网页里定义了SDK1,本条日志写在#code语句段中");
///     #elif SDK2
///         #code console.log("PC网页里定义了SDK2,本条日志写在#code语句段中");
///     #endif
/// #else
var testMsg2 = "其他";
/// #endif
console.log(testMsg2);
  • 关键字if, elif, endif, code
  • 表达式预定义符号 + 操作符 的运算, 支持的 操作符 有: () && || ! , 以及这些 操作符预定义符号 的各种复杂组合, 如: !(Wx && Miniapp) || !Native
  • /// #code 是为了防止编译/预览时, 语法错误而设定的关键字

PS: 当出现条件编译语法错误时, 将阻止构建

使用教程

  1. 全局或项目范围添加本插件
  2. 代码中加入需要的条件编译代码
  3. 预定义符号配置(配置各构建平台下使用的预定义符号)

PS: 由于Creator的构建流程支持有限(没提供构建出错/中断事件), 本插件采用的是构建前临时修改源码方式(加上特定注释)让当前条件的代码生效, 所以构建中出错, 本插件无法得知, 会导致代码被修改没有还原. 不用担心, 只要构建通过, 本插件会还原好代码. 或者使用菜单: 扩展 > ifdef > 清理构建留下的临时代码 来清理和还原代码

Creator3.x

构建面板 每个构建配置里设置 预定义符号

Creator2.x

菜单: 扩展 > ifdef > 预定义符号... 设置对应构建平台的预定义符号

Demos

gitee: ifdef-creator-demos

ifdef-creator | Cocos Store

再次奉上传送门, 一个3块钱的插件, 永久解决一个问题, 这不划算到家了?

11赞

好家伙像在写C代码

这个牛逼,就是不知道稳定性怎么样。有上线的项目使用过吗

主要是插件生效的是构建时, 插件只要保证条件编译的解析正确, 其实就没什么好担心的了, 又不会干预到运行时
而且这验证起来也很简单, 在写条件编译代码的地方看一眼, 或者多写一个日志输出, 也就知道这条件编译构建的对不对咯

mark!!!

恩恩,明白了

好东西,确实非常实用。

mark~~~~~

请问,为什么2.x 不支持字节跳动平台呢?


我是按官方的这个列表提供,配置列表的
字节跳动的构建,如果不考虑这个插件的情况,请问你是怎么发布的呢?其实我这只要拿到这个构建平台标识,就可以了,如果你知道请告诉我

我找到问题了,这个平台是2.x比较后面的版本加入构建的,稍等我升级一下插件

好嘞!牛的

IDE的代码提示如何?这个原理是注释源码吗?

因为语法是写在注释里的,要代码提示的话,肯定要做IDE的插件才能支持了,想着语法不复杂,手动写一下应该问题不大
原理确实是注释源码,不过有完善的备份机制,即使有问题,也提供了还原、清理的入口(在拓展菜单中)

新版本审核通过啦(2.x的版本号是1.0.2),请下载新版本试试哈,有问题及时反馈~

2赞

收到啦,已更新,有哒