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

原创

E聊SDK

修改于 2020-06-15 10:54:08

1.9K0

修改于 2020-06-15 10:54:08

文章被收录于专栏：用户4215420的专栏

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

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 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聊的源码定制开发自己所需要的功能。