Vite esbuild 配置 - JavaScript

简介

Vite是一个基于浏览器原生ESM开发的工具，它具有快速冷启动、基于ESM的按需编译等特点，很适合构建现代Web项目。其中，ESBuild是Vite的默认构建工具，它能快速构建出高效的JavaScript代码。本篇文章将介绍如何在Vite中使用ESBuild进行构建。

安装

在安装Vite时，ESBuild会被默认安装，因此不需单独安装。您只需在项目文件夹下，使用以下命令进行安装：

npm install vite --save-dev

基础配置

要使用ESBuild构建JavaScript代码，您需要编辑Vite的vite.config.js文件，并添加以下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: true,
    target: 'es2020',
    rollupOptions: {
      plugins: []
    }
  }
})

这些配置包括：

• minify: 是否压缩构建出的代码，默认为true。
• target: 构建出的代码的目标环境，这里是ES2020。
• rollupOptions: 配置Rollup插件，这里我们并未添加插件。

添加插件

在Vite中使用ESBuild，很容易添加ESBuild的插件。只需在rollupOptions中添加ESBuild插件即可。以下是一个例子：

import { defineConfig } from 'vite'
import { esbuild } from 'rollup-plugin-esbuild'

export default defineConfig({
  build: {
    minify: true,
    target: 'es2020',
    rollupOptions: {
      plugins: [
        esbuild({
          include: /\.[jt]s$/,
          minify: true,
          target: 'esnext',
        }),
      ],
    },
  },
})

这个例子添加了一个名为esbuild的插件，这个插件能够编译.js和.ts文件，并将构建出的代码压缩。其中，include是插件的匹配规则，这里是匹配所有.js和.ts文件；minify表示是否压缩代码；target表示编译出的代码的目标环境，这里是ESNext。

结语

以上是在Vite中使用ESBuild的基本配置和插件使用方法。ESBuild是一个非常快速的JavaScript构建工具，具有快速的冷启动和基于ESM的按需编译等特点。如果您正在构建现代Web项目，ESBuild+Vite将会是您的优秀选择之一。