Vite 插件 API 插件配置

2023-02-17 11:40 更新

用戶會將插件添加到項目的 devDependencies 中并使用數(shù)組形式的 plugins 選項配置它們。

// vite.config.js
import vitePlugin from 'vite-plugin-feature'
import rollupPlugin from 'rollup-plugin-feature'

export default defineConfig({
  plugins: [vitePlugin(), rollupPlugin()]
})

假值的插件將被忽略,可以用來輕松地啟用或停用插件。

?plugins也可以接受將多個插件作為單個元素的預設。這對于使用多個插件實現(xiàn)的復雜特性(如框架集成)很有用。該數(shù)組將在內部被扁平化(flatten)。

// 框架插件
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'

export default function framework(config) {
  return [frameworkRefresh(config), frameworkDevTools(config)]
}
// vite.config.js
import { defineConfig } from 'vite'
import framework from 'vite-plugin-framework'

export default defineConfig({
  plugins: [framework()]
})

簡單示例

通常的慣例是創(chuàng)建一個 Vite/Rollup 插件作為一個返回實際插件對象的工廠函數(shù)。該函數(shù)可以接受允許用戶自定義插件行為的選項。

引入一個虛擬文件

export default function myPlugin() {
  const virtualModuleId = '@my-virtual-module'
  const resolvedVirtualModuleId = '\0' + virtualModuleId

  return {
    name: 'my-plugin', // 必須的,將會在 warning 和 error 中顯示
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export const msg = "from virtual module"`
      }
    }
  }
}

這使得可以在 JavaScript 中引入這些模塊:

import { msg } from '@my-virtual-module'

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 // 如果可行將提供 source map
        }
      }
    }
  }
}


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號