介绍

当你的项目在小程序端存在全局组件，并且会打包到主包的时候你可能需要用到这个 Taro 插件

针对TARO项目实现全局自定义组件引用,将全局组件打包到分包之中，然后利用小程序的分包异步化特性跨分包自定义组件引用，就能让该组件脱离主包

本插件会自动在生成的产物的 wxml 和 index.json 中注入组件和组件声明。（目前兼容微信小程序和抖音小程序）

参数

  {
    ignore: [], // 需要忽略的文件夹，基于 Glob 语法
    component: string, // 组件名称，例如： <login-dialog> />
    usingComponentPath: string, // 公共组件的分包路径，例如：./common-component/login-dialog/index
    showLog: boolean, // 是否显示日志，默认为 false
    componentConfig: [ // 1.0.1 开始支持多个组件注入
      {
        component: "<global-notification />",
        usingComponentPath: "common-components/GlobalNotification/index"
      },
      {
        component: "<login-dialog />",
        usingComponentPath: "common-components/LoginDialog/index"
      }
    ],
  }

使用方法

1. 安装依赖包

yarn install taro-plugin-inject-component

2. 配置 taro插件 config/index.js 文件

{
  // ...other config
  plugins: [
    [
      'taro-plugin-inject-component',
      {
        ignore: [
          "**/common-components/**",
          "**/mp-html/**",
          '**/setting/home/**',
          '**/login/**'
        ],
        component: "<login-dialog />",
        usingComponentPath: "common-components/LoginDialog/index",
        showLog: true,
        componentConfig: [
          {
            component: "<global-notification />",
            usingComponentPath: "common-components/GlobalNotification/index"
          },
          {
            component: "<login-dialog />",
            usingComponentPath: "common-components/LoginDialog/index"
          }
        ],
      }
    ]
  ]
}