vite-plugin-set - vite 插件合集

简介

目录

• previewLibPlugin - 通过 http 预览产物
• replaceExternalPlugin - 快速 external

安装

npm i -D vite-plugin-set
# or
pnpm add -D vite-plugin-set

previewLibPlugin ↑

在 build.lib 构建模式下自动从 config.preview 生成基于 vite preview 的 http 协议的 url 预览（支持热更）

使用示例

默认配置

// vite.config.js
import { previewLibPlugin } from "vite-plugin-set";

export default {
  plugins: [previewLibPlugin()],
};

自定义配置

// vite.config.js
import { previewLibPlugin } from "vite-plugin-set";

export default {
  plugins: [
    previewLibPlugin({
      // 使用启用预览服务
      enabled: true,
      // 启动后的回调
      onStart(fileNames) {
        console.log(this.origins, fileNames);
      },
      // ...
      // 其他参数见下方说明
    }),
  ],
};

参数说明

参数定义

/**
 * @desc 预览build.lib构建出的文件 - 产物更新后仅在页面可见时刷新
 * @param {object} [options]
 * @param {boolean} [options.enabled] - 是否启用预览服务; 默认在命令行有--watch -w标记时启用
 * @param {function} [options.test] - test(fileName) -> boolean; 过滤chunk文件; 默认只过滤出js文件
 * @param {function} [options.onStart] - onStart(fileNames); 服务启动后且buildEnd后仅首次调用
 * @param {function} [options.onUpdate] - onUpdate(fileNames); 服务启动后且buildEnd后非首次调用
 * @param {boolean} [options.hmrEnabled = true] - 是否启用hmr
 * @param {string} [options.hmrCode] - 追加到hmrClient尾部的代码
 * @param {string} [options.hmrPath = '/hmr'] - hmr服务的接口路由
 * @param {string} [options.hmrClientPath = '/hmr.js'] - hmr在浏览器里运行的代码接口路由
 * @param {function} [options.parseInjectCode] - parseInjectCode(injectedHmrCode); 用于转换注入到构建的js文件底部的代码
 * @param {string} [options.host = 'localhost'] - 预览服务的地址
 * @param {number} [options.port = 4173] - 预览服务的端口
 * @param {string} [options.root = 'dist'] - 静态文件预览的目录
 * @param {object} [options.map = {}] - 静态文件预览地址的映射（虚拟文件url映射）; 例如 { 'index.js': 'index.cjs' } 即把 http://xxx/index.js 的实际响应地址改为 dist/index.cjs
 * @return {object} - vite plugin
 */

类型声明

import { Plugin, PreviewServer } from 'vite'

export declare function previewLibPlugin(options?: PreviewLibOptions): Plugin;

export interface PreviewLibOptions {
  enabled?: boolean
  test?: (fileName: string) => boolean
  onStart?: (this: PreviewLibServer, fileNames: string[]) => void
  onUpdate?: (this: PreviewLibServer, fileNames: string[]) => void
  hmrEnabled?: boolean
  hmrCode?: string
  hmrPath?: string
  hmrClientPath?: string
  parseInjectCode?: (this: PreviewLibServer, injectedHmrCode: string) => string | void
}

export declare interface PreviewLibServer extends PreviewServer {
  origins: string[]
  origin: string
  entryUrl: string
  hmr: HmrObject
  [key: string]: any
}

export declare interface HmrObject {
  origin: string
  url: string
  clientUrl: string
  emit: (fileNames: string[]) => void
}

replaceExternalPlugin ↑

替换 vite.config 中的 external，用于在 es 模式下无法 external 时，替换替换导入的路径为引用路径的表达式

默认配置

// vite.config.js
import { replaceExternalPlugin } from "vite-plugin-set";

export default {
  plugins: [
    replaceExternalPlugin({
      map: {
        react: "window.React",
        "react-dom": "window.ReactDOM",
      },
    }),
  ],
};

自定义配置

// vite.config.js
import { replaceExternalPlugin } from "vite-plugin-set";

export default {
  plugins: [
    replaceExternalPlugin({
      enabled: true,
      parse: importPath => "window.xxx",
      // ...
      // 其他参数见下方说明
    }),
  ],
};

类型声明

export declare function replaceExternalPlugin(options?: ReplaceExternalOptions): Plugin;

export interface ReplaceExternalOptions {
  // 对包名进行引用表达式的映射; 例如 { react: 'window.React' }
  map?: {
    [key: string]: string
  }
  // 是否启用该插件; 默认为 true
  enabled?: boolean
  // 对是否要处理的chunkName即文件路径进行过滤; 默认为 chunkName => chunkName.endsWith('.js')
  test?: (chunkName: string) => boolean
  // 将import关键字导入的路径转换为值的表达式; 默认为 importPath => map[importPath.split('/')[0]]
  parse?: (importPath: string) => string
}