前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >E聊SDK在TypeScript下的条件编译(使用js-conditional-compile-loader插件)

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环境下与微信小程序环境下也只需要编译相关的代码。

image.png
image.png

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

3.步骤:

3.1 安装js-conditional-compile-loader
代码语言:txt
复制
yarn add js-conditional-compile-loader --dev
3.2 修改webpack配置文件, 引入js-conditional-compile-loader

// 修改前

代码语言:txt
复制
module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [

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

// 修改后

代码语言:txt
复制
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 / 包括的代码就可以条件编译。

代码语言:txt
复制
// 以下的代码仅会在设置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 工具实现的.

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

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

代码语言:txt
复制
# 去除文件夹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条件编译

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.背景:
  • 2.分析:
  • 3.步骤:
    • 3.1 安装js-conditional-compile-loader
      • 3.2 修改webpack配置文件, 引入js-conditional-compile-loader
      • 4.参考:
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档