E聊SDK在TypeScript下的条件编译(使用js-conditional-compile-loader插件)

条件编译: 用同一套代码和同样的编译构建过程，根据设置的条件，选择性地编译指定的代码，从而输出不同程序的过程

1.背景：

E聊SDK需要使用一套TypeScript开发的客户端核心代码实现了跨平台支持(如Web, ReactNative, 小程序等)。

2.分析：

平台无关部分: 客户端SDK里有大部分业务逻辑是相同的，比如连接通道的建立，用户认证，文件上传等业务逻辑，这部分可称之为平台无关部分。
平台相关部分: 比如http网络请求，在Web下使用的是isomorphic-fetch依赖, 而在ReactNative 下使用的是官方原生支持的fetch, 在微信小程序下使用wx.request实现。

很容易想到的是，需要对不同的平台条件编译不同的代码，比如在Web下，条件编译isomorphic-fetch依赖相关的fetch代码段，ReactNative下的fetch与微信小程序的wx.request就无需编译到输出文件上。同理，在ReactNative环境下与微信小程序环境下也只需要编译相关的代码。

在C/C++ 环境下，有#ifdef 等预编译指令，在JavaScript/TypeScript 环境下，我们依靠js-conditional-compile-loader webpack 插件也是可以做到的。

3.步骤：

3.1 安装js-conditional-compile-loader

yarn add js-conditional-compile-loader --dev

3.2 修改webpack配置文件, 引入js-conditional-compile-loader

// 修改前

module: {rules: [{test: /\.tsx?$/i,use: [{loader: 'ts-loader',options: {configFile: path.resolve(__dirname, '../tslint.json')},},],exclude: /node_modules/}],},

// 修改后

module: {rules: [{test: /\.tsx?$/i,use: [{loader: 'ts-loader',options: {configFile: path.resolve(__dirname, '../tslint.json')},},
//  引入js-conditional-compile-loader插件{loader: 'js-conditional-compile-loader',options: {isDebug: process.env.NODE_ENV === 'development', // optional, this is defaultWEBAPP: process.env.platform === 'web', // any name, used for /* IFTRUE_WEBAPP ...js code... FITRUE_WEBAPP */WXAPP: process.env.platform === 'wx', // any name, used for /* IFTRUE_WXAPP ...js code... FITRUE_WXAPP */// RNAPP: process.env.platform === 'rn', // any name, used for /* IFTRUE_RNAPP ...js code... FITRUE_RNAPP */}},],exclude: /node_modules/}],},

关键在两个配置, loader 填写js-conditional-compile-loader; 在options添加条件编译项, 比如设置WEBAPP:true, 那么在TypeScript 使用/* IFTRUE_WEBAPP …js code… FITRUE_WEBAPP */ 包括的代码就可以条件编译。

// 以下的代码仅会在设置WEBAPP:true时才会条件编译/*IFTRUE_WEBAPP*/let webfetch = Fetch.getFetchToolkit();return webfetch(url as string, request).then(response =>{return response.json();}).then(res =>{console.log(`==> [${request.method}] ${url} back:` + Beans.json(res));const resp = this.response2ApiResponse(res);if(resp.isFailed()){// return Promise.reject(new Error(Beans.json(resp)));return Promise.reject(resp);}return Promise.resolve(this.response2ApiResponse(res));});/*FITRUE_WEBAPP*/

由于js-conditional-compile-loader 只能条件编译js 代码代码，若直接编译TypeScript 是会出错的，故我们需要使用ts-loader 将TypeScript 转成JavaScript 代码, 再使用js-conditional-compile-loader条件编译即可，这样可以打包出平台相关的sdk.js 给客户端使用。

问题: 怎么条件编译出TypeScript代码?
笔者暂未找到TypeScript相关的条件编译插件，因此条件编译TypeScript是使用unix sed 工具实现的.

# 去除IFTRUE_WXAPP的平台相关代码
sed -e ':a' -e 'N' -e '$!ba' -e 's/[ ]*\/\*IFTRUE_WXAPP\*\/.*\n.*\/\*FITRUE_WXAPP\*\// /g' -i  xxx.ts

若是多文件，加入一个for 循环即可

# 去除文件夹echatim 下所有IFTRUE_WXAPP的平台相关代码
for f in `find . echatim -name '*.ts'`; do echo $f  && sed -e ':a' -e 'N' -e '$!ba' -e 's/[ ]*\/\*IFTRUE_WXAPP\*\/.*\n.*\/\*FITRUE_WXAPP\*\// /g' -i '' $f; done

比如要求输出是IFTRUE_RNAPP平台, 只需要把IFTRUE_WXAPP, IFTRUE_WEBAPP 的代码去除即可。

下面是使用了TypeScript的条件编译工程: E聊SDK客户端核心库代码
E聊sdk(www.echat.work):是一个免费开源聊天解决方案SDK。为使商业项目快速接入即时聊天的功能，E聊为各种平台, 技术框架(如:web,小程序,android,ios,pc,java, python, C#, C++)开发的项目提供了简易接入的客户端, 服务端SDK。 使用E聊, 您可以在短时间内为您的项目加入即时聊天功能。同时，您可以下载E聊 的源码定制开发自己所需要的功能。

4.参考：

Javascript条件编译