vite 开发技巧

Question

虚拟文件

所谓虚拟文件就是凭空创建出来的文件。比如往 js 里插一段 css，就可以在代码中注入 import '/my-virtual-prefix/xxx.css'

const virtualPlugin = () => {
  return {
    name: 'virtual-test',
    enforce: 'post',
    resolveId(id) {
      return id.startsWith('/my-virtual-prefix') ? id : null
    },
    load(id) {
      return generateCSSCode(id);
    }
  }
}

手动更新依赖

有时候需要手动触发依赖更新，比如当你使用了虚拟文件。
可以通过 server.moduleGraph 来管理依赖，并使用 server.ws 来提醒页面更新

const myPlugin = () => {
  let server
  let invalidate = (hash) => {
    if (!server) return
    const id = getYourId(hash)
    const mod = server.moduleGraph.getModuleById(id)
    if (!mod)
      return
    server.moduleGraph.invalidateModule(mod)
    // 这里需要客户端做些处理
    server.ws.send({
      type: 'update',
      updates: [{
        acceptedPath: id,
        path: id,
        timestamp: +Date.now(),
        type: 'js-update',
      }],
    })
  }
  return {
    name: 'configure-server',
    configureServer(_server) {
      server = _server
    },
    transform(code, id) {
      if (server) {
        // use server...
      }
    }
  }
}

插件间传递参数

vite 支持返回插件数组，可以在几个插件中传递一个 context 对象

export default function i18nPlugin() {
  const ctx = { dict: {} }
  return [
    extract(ctx),
    count(ctx)
  ]
}

resolveId

注意对于默认后缀，如果想要在内置的 plugin 前运行，需要添加 enforce: 'pre'