W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
用戶會將插件添加到項目的 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
}
}
}
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: