vite插件

暗色调~

已于 2022-08-22 18:03:09 修改

阅读量333

点赞数

文章标签： Vite 插件开发 HTML注入环境变量配置选项

于 2022-08-22 16:55:50 首次发布

本文链接：https://blog.csdn.net/zsj21438/article/details/126469450

版权

import {
  Plugin,
  ResolvedConfig,
} from 'vite'

export interface Options {
  /** Value of script src */
  inject?: string
  /**
   * 匹配位置 
   * params {body-after}   在 </body> 前引入
   * params {head-after}   在 </head> 前引入
   * params <!--seo-cdn-->} seo 需要引入的js
   * */
  local?: string,
  /**
   * 环境变量 
   * params {release}  测试
   *params {production}  生产
   *params {development}  本地
   * */
  mode?: string

}

export function expandPlugin(options: Options | Options[] = {}): any {
  let config: ResolvedConfig;
  let opts = Array.isArray(options) ? options : [options]
  return {
    name: 'expand-plugin',
    configResolved(_config: any) {
      config = _config;
      // console.log('config', config.env.MODE)
    },
    transformIndexHtml(html: string) {

      let env = config.env.MODE || 'development';
      for (let k in opts) {
        if (opts[k].inject) {
          if (!opts[k].mode || opts[k].mode == env)
            html = replaceHtml(html, opts[k].inject, opts[k].local);
        }
      }
      return html
    },
    apply: 'build',//serve 'build'
  }
}

function replaceHtml(html: string, inject: any, local: string = '') {
  if (local === 'head-after') {
    html = html.replace(`</head>`, `${inject}</head>`)
  } else if (local === 'body-after') {
    html = html.replace(`</body>`, `${inject}</body>`)
  } else if (local === '<!--seo-cdn-->') {
    html = html.replace(`<!--seo-cdn-->`, `${inject}`)
  } else html = html.replace(`</body>`, `${inject}</body>`)

  return html
}