@haici/taro-inject-loader

海鹚 taro 全局组件注入工具

背景

taro 小程序目前每一个页面的 page 是独立的，如果我们有通用的功能性组件想要在页面中使用，或者有通用的布局想要应用到全局页面，只能在每个页面中手动import，使用 taro-inject-loader 可以帮助我们自动注入我们想要注入的通用组件。

使用方式

项目配置

在实际 taro 项目中使用时，使用方式示例如下：

// 一般来说配置文件路径：config/index.js

constant isPage = () => {
  return ...
}

export default {
  ...
  mini: {
    webpackChain(chain) {
      chain.merge({
        module: {
          rule: {
            injectBaseComponentLoader: {
              test: /\.[tj]sx$/,
              use: [
                {
                  loader: '@haici/taro-inject-loader',
                  options: {
                    importPath: '@/components/layout/pageContainer/index',
                    injectType: 'wrap',
                    isPage,
                  },
                },
              ],
            },
          },
        },
      });
    },
  }
  ...
}

参数说明

在配置文件中使用时，options 具体参数说明： | 参数名 | 类型 | 必填 | 枚举值 | 默认值 | 说明 | | :-----| :---- | :---- | :---- | :---- | :---- | | importPath | String | 是 | - | - | 需要注入到全局页面的通用组件文件路径 | | injectType | String | 否 | wrap ｜ append | append | 注入的方式，wrap 为包含模式，append 为子节点模式 | | isPage | Function | 否 | - | 内置默认判断函数 | 判断是否是页面的方法，返回一个布尔值 |