@ywfe/cli/plugins/htmlTransformPlugin.js

遥望前端开发命令行工具

import path from 'path';
import { getViteBuildConfig, chooseDailyEnv } from '../lib/util/vite';

const htmlTransformPlugin = async () => {
  const startEnv = await chooseDailyEnv()
  const config = await getViteBuildConfig();
  const { libConfig, hasMenu = true, isH5 = false, yapiConfig = {}, isHtmlReplacement } = config;

  const noMenu = isH5 || !hasMenu;

  const str = JSON.stringify(yapiConfig);

  const defaultLibConfig = {
    ywDesign: '0.2.72-beta.3',
    ppfish: '2.1.5',
  };
  const allLibConfig = {
    ...defaultLibConfig,
    ...libConfig,
  };
  const tags = [
    {
      tag: 'script',
      children: `window.localStorage.setItem('VITE_SERVE_HAS_MENU', ${!noMenu})`,
    },
    {
      tag: 'script',
      children: `window.localStorage.setItem('env', '${startEnv}')`,
    },
    {
      tag: 'script',
      children: `configs = {...configs, ...${str}}`,
      injectTo: 'head',
    },
  ];

  if (!isH5) {
    // 这个文件样式会覆盖掉h5中的组件样式 只用于PC低代码页面
    tags.push({
      tag: 'link',
      attrs: {
        rel: 'stylesheet',
        href: 'https://ywfedps.oss-cn-hangzhou.aliyuncs.com/packages/@ywfe/materials-render/0.2.0/dist/index.umd.css',
      },
      injectTo: 'head',
    });
  }

  if (isHtmlReplacement) {
    const filePath = path.join(__dirname, '../../config/vite/index.tsx');
    tags.push({
      tag: 'script',
      attrs: {
        type: 'module',
        src: filePath,
      },
      injectTo: 'body-prepend',
    });
  }

  return {
    name: 'html-transform',
    transformIndexHtml(html, ctx) {
      Object.keys(allLibConfig)?.map((libName) => {
        const version = allLibConfig[libName];
        const str = `%${libName}%`;
        html = html.replace(new RegExp(str, 'g'), version);
      });

      return {
        html,
        tags,
      };
    },
  };
};

export default htmlTransformPlugin;