caidix / taro-inject-components

Taro3 自动注入组件插件，页面级别注入全局组件。

Taro3 全局组件注入插件

全局注入插件

全局注入插件用于为每个页面自动注入一些全局组件、方法。思路来源于前司小程序插件，于此基础之上完善更进以满足全局注入某些吐司、防控等业务需求。

安装

npm i @caidix/taro-loader-component-inject -D

使用前置条件

1. Taro 3.6.0 以上版本， React18 开发方式
2. 插件为 Webpack Loader，仅支持采用 Webpack 进行打包编译

添加配置

// config/index.js
const config = {
  // ...
  mini: {
    webpackChain(chain) {
      chain.module
        .rule("script")
        .test(/\.[tj]sx?$/i)
        .use("taro-loader-component-inject")
        .loader("@caidix/taro-loader-component-inject")
        .options({
          // options
          enable: true,
          includesPages: ["pages/index/index"],
        })
        .end();
    },
  },
  // ...
};

配置参数说明 options

属性	说明	类型	默认值
enable	是否使用插件	boolean	false
componentsPath	全局组件存放路径，当前默认前往 src/_inject	string
includePages	全局范围下允许被注入的页面路由集合,要求书写方式与 router 中的路径相同或是 Glob 匹配规则	Array	``
excludePages	全局范围下不允许被注入的页面路由集合,要求书写方式与 router 中的路径相同或是 Glob 匹配规则	Array	``
customValidate	自定义处理需要被注入的页面, 传入一个函数，返回 true 时该页面被注入，反之不注入	(filePath: string) => boolean	``

注入规则

1. 插件将会追溯页面组件 export default XX 中默认导出的组件，找到其最外层的 return,为其注入相应的内容, 额外的，目前仅支持存在 if return 的形式：

// inject Component
import InjectBaby from '../xxxx'

// example
const Hello = () => {
return <View>你是一只猪</View>
}
// injected
const Hello = () => {
return <View><View>你是一只猪</View><InjectBaby /></View>
}

// example
const Hello = () => {
const i = 5;
if (i > ?) {
return <View>你不是一只猪</View>
}
return <View>你是一只猪</View>
}
// injected
const Hello = () => {
const i = 5;
if (i > ?) {
return <><View>你不是一只猪</View><InjectBaby /></>
}
return <><View>你是一只猪</View><InjectBaby /></>
}

export default Hello;

2. 原则上你不应该主动在页面中引入全局注入组件。当你在页面中手动引入了 src/_inject（注入组件存放的文件夹） 内的组件，并且并未将该页面从配置中移除时，插件会匹配到你已手动引入从而取消注入。（该逻辑只针对页面组件，不针对自定义的小组件）

全局注入组件规则

需要全局注入的组件，需按规则写入目录： src/_inject 文件夹内。

创建步骤

1. src/_inject 文件夹中创建对应文件夹， 例如 global-toast

2. 创建 index.tsx 及 config.json 或是 config.{env}.json 文件

   • index.tsx / index.tt(weapp).tsx : 你要注入的组件入口文件，为默认导出 export default XX；
   • config.{env}.json： config 文件为我们建立需要被注入的组件配置文件，不存在该配置文件时组件不会被注入。 当你指定 env 配置时，将会优先读取对应环境的配置。
   • 当然，如果_inject 下的组件没有基础配置文件也没有{env}.json 配置文件会抛出错误，如果你想避免错误提示，请创建一个 config.json，并将 enable 属性设置为 false，再认真书写针对{env}.json 这类文件的配置。

3. 当你的注入组件没有强定义环境时，插件会优先查看文件夹内是否存在该环境定义的文件去使用，例如当前为 weapp 环境，你的组件目录内存在 index.weapp.tsx 和 index.tsx 文件，插件会优先采用 index.weapp.tsx 文件

组件配置参数 config.json

属性	说明	类型	默认值	是否必填
enable	是否使用该组件，只有填 true 才会被注入	boolean	false	否
entry	被注入的组件的入口，按上面的创建步骤时需要填入: *entry:"index.tsx"也可以填入entry:"index.weapp.tsx"*当你的注入文件没有强定义环境时，插件会优先选择存在当前环境下的文件进行注入。	string	``	是
tagName	注入时的组件名	string	不填默认为文件目录名	否
includePages	组件范围内允许被注入的页面路由集合,要求书写方式与 router 中的路径相同或是Glob 匹配规则	Array	``	否
excludePages	组件范围内不允许被注入的页面路由集合,要求书写方式与 router 中的路径相同或是Glob 匹配规则	Array	``	否
injectEnv	组件允许被注入的环境，不写默认都注入，单个可以写字符串"weapp"，也可写数组["weapp", "qq"]	weapp / swan / alipay / tt / qq / jd / h5 / rn		否
injectPosition	注入组件所处 jsx 的位置	bottom/top	bottom	否
customValidate	自定义处理需要被注入的页面, 传入一个函数，返回 true 时该页面被注入，反之不注入	(filePath: string) => boolean	bottom	否