您的位置:58脚本 > Vite 使用插件

Vite 使用插件

2023-05-11 03:32 Vite教程

 Vite 使用插件

Vite 可以使用插件进行扩展,这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统,同时根据需要也能够扩展开发服务器和 SSR 功能。

添加一个插件

若要使用一个插件,需要将它添加到项目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 数组中引入它。例如,要想为传统浏览器提供支持,可以按下面这样使用官方插件 @vitejs/plugin-legacy:

$ npm i -D @vitejs/plugin-legacy
// vite.config.js
import legacy from "@vitejs/plugin-legacy"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    legacy({
      targets: ["defaults", "not IE 11"]
    })
  ]
})

plugins​也可以接受包含多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性(如框架集成)很有用。该数组将在内部被扁平化。

Falsy 虚值的插件将被忽略,可以用来轻松地启用或停用插件。

强制插件排序

为了与某些 Rollup 插件兼容,可能需要强制执行插件的顺序,或者只在构建时使用。这应该是 Vite 插件的实现细节。可以使用 ​enforce ​修饰符来强制插件的位置:

  • pre​:在 Vite 核心插件之前调用该插件
  • 默认:在 Vite 核心插件之后调用该插件
  • post​:在 Vite 构建插件之后调用该插件
// vite.config.js
import image from "@rollup/plugin-image"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: "pre"
    }
  ]
})

按需使用

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。如果插件在服务或构建期间按需使用,请使用 apply 属性指明它们仅在 "build" 或 "serve" 模式时调用:

// vite.config.js
import typescript2 from "rollup-plugin-typescript2"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: "build"
    }
  ]
})


阅读全文
以上是58脚本为你收集整理的 Vite 使用插件全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS