全局组件注入

可参考对应的 webpack loader。

如何使用

安装

pnpm add @plugin-light/vite-plugin-insert-global-comp -D

在 vite.config.ts 中添加如下设置：

import { defineConfig } from 'vite';
import { insertGlobalCompVitePlugin } from '@plugin-light/vite-plugin-insert-global-comp';


export default defineConfig({
  plugins: [
    insertGlobalCompVitePlugin({
      pages: ['/Users/mike/Documents/web/src/project/user/views/index/index-home.vue'],
      components: [{
        isOnTop: false,
        name: 'MatchCommDialog', // 组件名称
        id: 'tip-match-comm-tips-dialog',
      },
      {
        isOnTop: false,
        name: 'GlobalComponent', // 组件名称
        id: 'global-component',
      }],
      platforms: ['mp-weixin', 'mp-qq'],
    })
  ],
});

参数

export interface IInsertGlobalCompOptions {
  // 插入的组件列表
  components: Array<{
    // 组件名称
    name: string;
    // 组件 id
    id: string;
    // 是否在顶部，默认 false
    isOnTop?: boolean;
  }>;

  // 处理的平台，默认 ['mp-weixin', 'mp-qq']
  platforms?: Array<string>;

  // 处理的页，默认为 `pages.json` 中所有页面
  pages?: Array<string>;


  // 需要插入一个包裹 div 时，给它填充的属性，比如 [['style', 'height: \'100%\'']]
  firstTagAttrs?: Array<Array<string>>;
}

脚本形式

建议使用脚本形式，前置修改代码，好处是：

1. 避免黑盒，以及潜在的插件间互相影响问题
2. 所见即所得，减少心智负担
3. 容易调试和发现问题

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');
const { insertComponentByScript } = require('@plugin-light/vite-plugin-insert-global-comp');

const myEnv = dotenv.config({ path: '.env.local' });
dotenvExpand.expand(myEnv);

function main() {
  insertComponentByScript({
    components: [ // 注入哪些公共组件
      {
        isOnTop: false,
        name: 'GlobalComponent', // 组件名称
        id: 'global-component',
      },
    ],
    firstTagAttrs: [
      ['style', 'height: 100%']
    ]
  });
}

main();

更新日志

点此查看