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 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聊 的源碼定制開發自己所需要的功能。

4.參考：

Javascript條件編譯