【taro react】---- 解决H5接入uni-app版本的IM_react引入uniapp

1. 问题

由于项目开发比较紧张，腾讯 IM 的接入就使用了 TUIKit 含UI集成方案，遇到的问题，uni-app的UI本来就是一个单独的项目，需要集成到现有的 Taro React 中，就只能作为一个独立的项目，不跳转时不影响原有逻辑。

2. 解决办法

1. 单独搭建一个 IM 的项目，需要使用的时候，跳转过去；
2. 在当前项目中创一个静态的文件夹，打包编译的时候不编译静态文件夹中的文件，直接复制到编译后的生产目录。

3. 采用方案二解决

3.1 copy

用于把文件从源码目录直接拷贝到编译后的生产目录。

3.2 copy.patterns

1. 用于指定需要拷贝的文件或者目录，每一项都必须包含 from 、to 配置，分别代表来源和需要拷贝到的目录。同时可以设置 ignore 配置来指定需要忽略的文件， ignore 是指定的 glob 类型字符串，或者 glob 字符串数组。
2. 注意，from 必须指定存在的文件或者目录，暂不支持 glob 格式。from 和 to 直接置顶项目根目录下的文件目录，建议 from 以 src 目录开头，to 以 dist 目录开头。
3. 一般有如下的使用形式：

module.exports = {
  // ...
  copy: {
    patterns: [
      { from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: ['*.js'] }, // 指定需要 copy 的目录
      { from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // 指定需要 copy 的文件
    ]
  }
}
1
2
3
4
5
6
7
8
9

3.3 copy.options

拷贝配置，可以指定全局的 ignore：

module.exports = {
  // ...
  copy: {
    options: {
      ignore: ['*.js', '*.css'] // 全局的 ignore
    }
  }
}
1
2
3
4
5
6
7
8

4. 实际配置

4.1 配置代码

// 获取环境变量
const env = JSON.parse(process.env.npm_config_argv)['cooked'][1].split(':')[1];

module.exports = {
  // ...
  // 编译后的生产目录配置
  outputRoot: `dist/dist_${env}`,
  copy: {
    // 判断环境，h5时不编译，直接拷贝到编译后的生产目录
    patterns: env == 'h5' ? [
      { from: 'src/static', to: `dist/dist_${env}/static` }
    ] : []
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.2 编译结果