Conditional compilation of E chat SDK under TypeScript (using JS conditional compile loader plug-in)

Conditional compilation: the process of using the same set of code and the same compilation and build process to selectively compile the specified code according to the set conditions, so as to output different programs

1. Background:

E-chat SDK needs a set of client core code developed by TypeScript to realize cross platform support (such as web, react native, applet, etc.).

2. Analysis:

Platform independent part: most of the business logic in the client SDK is the same, such as the establishment of the connection channel, user authentication, file upload and other business logic. This part can be called platform independent part.
Platform related parts: for example, http network request uses isomorphic fetch dependency under the Web, while under react native, it uses official native fetch, which is used under wechat applet wx.request realization.

It is easy to think that different codes need to be compiled for different platform conditions. For example, under the Web, the conditional compilation of isomorphic fetch depends on the relevant fetch code segment, and the fetch under react native and the wechat applet's wx.request There is no need to compile to the output file. Similarly, in the ReactNative environment and wechat applet environment, only the relevant code needs to be compiled.

In the C/C + + environment, there are precompiled instructions such as ifdef. In the JavaScript/TypeScript environment, we can also rely on the JS conditional compile loader webpack plug-in.

3. Steps:

3.1 install JS conditional compile loader

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

3.2 modify the webpack configuration file and introduce JS conditional compile loader

//Before modification

module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [

                  {
                    loader: 'ts-loader',
                    options: {
                        configFile: path.resolve(__dirname, '../tslint.json')
                    },
                  },
                ],
                exclude: /node_modules/
            }
        ],
    },

//After modification

module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [
                  {
                    loader: 'ts-loader',
                    options: {
                        configFile: path.resolve(__dirname, '../tslint.json')
                    },
                  },
//  Introducing JS conditional compile loader plug-in
                  {
                    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/
            }
        ],
    },

The key is to fill in JS conditional compile loader in two configurations, and add conditional compile items in options, such as settings WEBAPP:true , then use / iftrue in TypeScript_ WEBAPP ...js code... FITRUE_ Webapp / includes code that can be conditionally compiled.

// The following code will only be set in WEBAPP:true Conditional compilation only when
        /*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*/

Because JS conditional compile loader can only conditionally compile JS code, if TypeScript is compiled directly, it will make mistakes, so we need to use TS loader to convert TypeScript into JavaScript code, and then use js conditional compile loader to conditionally compile, so that we can package platform related sdk.js For clients.

Question: how to conditionally compile TypeScript code?
The author has not found the conditional compilation plug-in related to TypeScript, so conditional compilation TypeScript is implemented by unix sed tool

# Remove iftrue_ Platform related code of wxApp
sed -e ':a' -e 'N' -e '$!ba' -e 's/[ ]*\/\*IFTRUE_WXAPP\*\/.*\n.*\/\*FITRUE_WXAPP\*\// /g' -i  xxx.ts

If there are multiple files, add a for loop

# Remove all iftrues under the folder echatim_ Platform related code of 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

For example, the output is required to be IFTRUE_RNAPP platform, only iftrue_ WXAPP, IFTRUE_ The code of webapp can be removed.

Here is a conditional compilation project using TypeScript: E chat SDK client core library code
E-chat SDK( www.echatim.cn ): is a free open source chat solution SDK. In order to make the business project quickly access the instant chat function, E-chat provides a simple access client and server SDK for various platforms and technical frameworks (such as: web, applet, Android, IOS, PC, Java, python, C + +). With E-chat, you can add instant chat to your project in a short time. At the same time, you can download the source code of e chat to customize and develop the functions you need.

4. Reference:

Javascript conditional compilation

Tags: Javascript TypeScript SDK JSON React

Posted on Sun, 14 Jun 2020 01:28:10 -0400 by JJBlaha