为什么 Typescript 不添加条件编译这个功能?

[liuidetmks]

为什么 ts 不添加条件编译这个功能?
似乎有人提过这个,但是被很多前端否了,也就无了 是的,有时候用 minify 能做到把测试代码去掉，但是这样似乎也仅限于简单的同步代码。

我的使用的 gulp,流程是 ts -> js -> terser -> min.js

/// 下面这个 minify 能满足预期, 最终生成代码不包含测试代码 log
if(__DEBUG_FLAG__ == 1){
    log('some log ');
    prepareTestDataSync();
    
}


///下面代码,虽然也能做到 prepareTestDataAsync, 但是代码还是在最终生成 min.js 文件里面.
if(__DEBUG_FLAG__ == 1){
    await prepareTestDataAsync();
}

没有写清楚,目标代码是ES5, 没有原生await,导致teser不能正常工作。

teser 能删掉 第一个 prepareTestDataAsync_step1 并不能删掉 prepareTestDataAsync_step2

另外,我想 prepareTestDataAsync_stepXXXX 方法体也不要在目标代码中.

这是目前的代码
class A{
 async prepareTestDataAsync_step1{};
 async prepareTestDataAsync_step2{};

 async func1(){
    if(__DEBUG__){
       await prepareTestDataAsync_step1();
       await prepareTestDataAsync_step2();
  }
}

// 我想要的

class A{
#if __DEBUG__
 async prepareTestDataAsync_step1{};
 async prepareTestDataAsync_step2{};
#endif
...

 async func1(){
#if  __DEBUG__
       await prepareTestDataAsync_step1();
       await prepareTestDataAsync_step2();
#endif
  }
}
 

[kaixuan1901]

我也想知道，之前就想要这个功能。

[mxT52CRuqR6o5]

我这边找了个在线的 terser 测试，能把 async function 中条件为 false 的 if 分支去掉

[learningman]

你可以自己写个预处理的 loader ，webpack 是可以的，gulp 大概也可以吧

[learningman]

而且也不应该这样吧，测试的代码不应该放在主代码里，应该是测试起来之前那个 before/prepare/build 里面准备这些 mock 的东西

[liandi1990]

typescript 的类型系统和 c++ 一样是图灵完备的

或许可以实现一个类似 sfinae 或者 constexpr if 的东西？

[liuidetmks]

@mxT52CRuqR6o5 编译到 ES5 代码里面只能去掉第一个 调用,
prepareTestDataAsync_step0();
prepareTestDataAsync_step1();
prepareTestDataAsync_step2();

step1 step2 会保留
,我希望 prepareTestDataAsync 方法体也不要编译到 minijs 里面

[luob]

https://rollupjs.org/repl/?version=2.61.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMiUyRiolMjBEWU5BTUlDJTIwSU1QT1JUUyU1Q24lMjAlMjAlMjBSb2xsdXAlMjBzdXBwb3J0cyUyMGF1dG9tYXRpYyUyMGNodW5raW5nJTIwYW5kJTIwbGF6eS1sb2FkaW5nJTVDbiUyMCUyMCUyMHZpYSUyMGR5bmFtaWMlMjBpbXBvcnRzJTIwdXRpbGl6aW5nJTIwdGhlJTIwaW1wb3J0JTIwbWVjaGFuaXNtJTVDbiUyMCUyMCUyMG9mJTIwdGhlJTIwaG9zdCUyMHN5c3RlbS4lMjAqJTJGJTVDbmNvbnN0JTIwRkxBRyUyMCUzRCUyMDAlNUNuJTVDbmNvbnN0JTIwcHJlcGFyZVRlc3REYXRhQXN5bmMlMjAlM0QlMjBhc3luYyUyMCgpJTIwJTNEJTNFJTIwJTdCJTVDbiU1Q3RzZXRUaW1lb3V0KCgpJTNEJTNFJTIwY29uc29sZS5sb2coJTVDJTIydGVzdCU1QyUyMiklMkMlMjAxMDAwKSU1Q24lN0QlNUNuJTVDbmNvbnN0JTIwcnVuJTIwJTNEJTIwYXN5bmMlMjAoKSUyMCUzRCUzRSUyMCU3QiU1Q24lNUN0aWYlMjAoRkxBRyUyMCUzRCUzRCUzRCUyMDEpJTIwJTdCJTVDbiU1Q3QlNUN0Y29uc29sZS5sb2coJTVDJTIyZmxhZyUyMCUzRCUzRCUzRCUyMDElNUMlMjIpJTVDbiU1Q3QlN0QlMjBlbHNlJTIwJTdCJTVDbiU1Q3QlNUN0Y29uc29sZS5sb2coJTVDJTIyZmxhZyUyMCUzRCUzRCUzRCUyMDAlNUMlMjIpJTVDbiU1Q3QlNUN0YXdhaXQlMjBwcmVwYXJlVGVzdERhdGFBc3luYygpJTVDbiU1Q3QlN0QlNUNuJTdEJTVDbiU1Q25ydW4oKSU1Q24lMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE

你应该使用 rollup 或者 webpack 。

tree shaking 一般是打包工具的职责，因为这种工作非常依赖模块分析。想让编译工具帮你做 tree shaking ，狗拿耗子了属于是

[mxT52CRuqR6o5]

@liuidetmks
因为先编译 es5 再 terser 分析不出来了吧，把去除 false 条件的 if 代码的工作放到编译 es5 之前就行了

[hronro]

@luob #7
webpack 的 tree-shaking 就是交给 minifier 做的。🐶

[jones2000]

正式版本不要写这几个测试函数，测试的时候，直接外部接入的方式把这 2 个测试函数加上不就可以了。

[ysc3839]

直接按“我想要的”那块代码那样写，然后在给 tsc 编译前先用 C 预处理器处理一遍即可。
许多 ARM 的汇编器都是这么干的，而不是像一些 x86 汇编器内置宏功能。

[iqoo]

可以间接支持。申明一个 declare const 变量，条件判断用 typeof 。

当然生成的 JS 里仍存在条件不成立的代码，但 minify 之后就没了。

举个例子：/github.com/EtherDream/freecdn-js/blob/master/loader-js/src/loader.ts#L85

[wszgrcy]

可以写 transformer 进行静态分析.

[liuidetmks]

@luob 目标代码 es5 ,debug code 包含多个 await 方法时候,你这个 tree-shaking 并不能正确工作

[DOLLOR]

以前我用过这个
https://github.com/jsoverson/preprocess

[12101111]

直接调 C 语言的宏处理器不就行了 clang-cpp -DNODEBUG -E xxx.ts -o xxx.ts