uni-insert-code-loader

uni-app使用webpack打包时插入自定义代码的loader，用于解决小程序中组件无法全局挂载，需要在页面单独引用的问题。

安装

npm install uni-insert-code-loader --save-dev

使用方法

在vue.config.js文件中添加loader

module.export = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'uni-insert-code-loader',
            options: {
              pagesPath: path.resolve(__dirname, './src/pages.json'),
              componentsConfigs: {
                customComponent: {
                  name: 'CustomComponent',
                  templateContent: '<CustomComponent />',
                  importContent: `import CustomComponent from '@/components/CustomComponent'`
                },
              },
              globalTemplateComponents: ['customComponent'],
            }
          }
        ]
      }
    ]
  }
}

属性配置

| 名称 | 类型 | 是否必填 | 描述 | | :------------------------: | :------: | :------: | :----------------------------------------------------------: | | pagesPath | String | true | pages.json文件的路径，loader需要根据定义的路由进行注入操作。 | | componentsConfigs | Object | false | 组件配置，在template中注入的内容都需要在这里进行配置。 | | styleConfigs | Object | false | 样式配置，在style中注入的内容都需要在这里进行配置。 | | globalTemplateComponents | Array | false | 全局配置，要在template中插入的组件。 | | globalStyles | Array | false | 全局配置，要在style中插入的样式。 | | pagesConfigs | Object | false | 页面单独配置，优先级高于全局，如果配置了会忽略全局配置。 |

componentsConfigs

属性 | 名称 | 类型 | 是否必填 | 描述 | | :---------------: | :------: | :------: | :----------------------------------------------------------: | | name | String | false | 组件的名称，如果是单独引入的组件，需要组件名称在components中注册该组件，全局注册的组件不需要。 | | templateContent | String | false | 在template中注入的内容。 | | importContent | String | false | 在script中引用的内容。 |

以上的属性都不是非必填的，可以单独每一项。

如：

单独注入templateContent

componentsConfigs: {
    customComponent: {
        templateContent: `
            <view class="custom-view">
            	<text>页面单独引入</text>
            	<image class="custom-image" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92b1f16e05864315b3d396951d25aaee~tplv-k3u1fbpfcp-watermark.awebp" />
            </view>
        `
    }
}

单独注入importContent

componentsConfigs: {
    customComponent: {
        importContent: `import 'custom.css'`
    }
}

styleConfigs

| 名称 | 类型 | 是否必填 | 描述 | | :-------: | :------: | :------: | :-------------------: | | content | String | true | 在style中注入的内容 |

如：

styleConfigs: {
   customComponent: {
       content: `
           .custom-view {
           	width: 100%;
           	text-align: center;
           	.custom-image {
           		border-radius: 25px;
           	}
           }
       `
   }
}

globalTemplateComponents

注入的内容需要在componentsConfigs中定义

globalTemplateComponents: ['customComponent']

globalStyles

注入的内容需要在styleConfigs中定义

globalStyles: ['customComponent']

pagesConfigs

注入的路由需要在pages.json文件中定义，内容需要在componentsConfigs和styleConfigs中定义

pagesConfigs: {
    'pages/index/index': {
        templateComponents: ['customComponent'],
        styles: ['customComponent']
    }
}