@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	否	-	内置默认判断函数	判断是否是页面的方法，返回一个布尔值