条件编译: 用同一套代码和同样的编译构建过程，根据设置的条件，选择性地编译指定的代码，从而输出不同程序的过程
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环境下与微信小程序环境下也只需要编译相关的代码。
image.png
在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 default
WEBAPP: 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.echatim.cn):是一个免费开源聊天解决方案SDK。为使商业项目快速接入即时聊天的功能，E聊为各种平台, 技术框架(如:web,小程序,android,ios,pc,java, python, C#, C++)开发的项目提供了简易接入的客户端, 服务端SDK。 使用E聊, 您可以在短时间内为您的项目加入即时聊天功能。同时，您可以下载E聊 的源码定制开发自己所需要的功能。
网友评论