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']
    }
}