插件开发

Vite 插件开发

Vite 插件扩展了 Rollup 精心设计的插件界面,并增加了一些额外的 Vite 专用选项。因此,你可以只写一次 Vite 插件,并让它同时适用于开发和构建。典型的 Vite 组件示意如下:

export default function myPlugin() {
  const virtualFileId = "@my-virtual-file";

  return {
    name: "my-plugin", // required, will show up in warnings and errors
    resolveId(id) {
      if (id === virtualFileId) {
        return virtualFileId;
      }
    },
    load(id) {
      if (id === virtualFileId) {
        return `export const msg = "from virtual file"`;
      }
    },
  };
}

它允许用 JavaScript 导入虚拟文件。

import { msg } from "@my-virtual-file";

console.log(msg);

自定义文件转义

const fileRegex = /\.(my-file-ext)$/;

export default function myPlugin() {
  return {
    name: "transform-file",

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null, // provide source map if available
        };
      }
    },
  };
}
上一页
下一页