第4章 Vite模块化与插件系统(一）

第4章 模块化与插件系统

Vite 提供了灵活的模块化和插件系统，使得开发者可以根据需求扩展其功能。在本章中，我们将详细介绍如何使用 Vite 的模块化和插件系统。

4.1 模块化

Vite 采用了现代 JavaScript 的模块化标准（ES Modules），支持各种模块化方式，并提供了强大的模块解析功能。

4.1.1 ES 模块

Vite 原生支持 ES 模块（ESM）。你可以使用 import 和 export 语法来组织代码：

// src/utils.js
export function greet(name) {
  return `Hello, ${name}!`
}

// src/main.js
import { greet } from './utils'

console.log(greet('Vite'))

4.1.2 CommonJS 模块

Vite 也支持 CommonJS 模块。你可以使用 require 和 module.exports 语法：

// src/utils.cjs
module.exports = {
  greet(name) {
    return `Hello, ${name}!`
  }
}

// src/main.js
const { greet } = require('./utils.cjs')

console.log(greet('Vite'))

4.1.3 动态导入

Vite 支持动态导入，这是实现按需加载的基础。你可以使用 import() 语法：

// src/main.js
import('./utils').then(({ greet }) => {
  console.log(greet('Vite'))
})

4.1.4 CSS 模块

Vite 支持 CSS 模块化。你可以通过 import 语法导入 CSS 文件，并使用类名进行样式管理：

/* src/styles.module.css */
.title {
  color: red;
}

// src/main.js
import styles from './styles.module.css'

const title = document.createElement('h1')
title.className = styles.title
title.textContent = 'Hello Vite'
document.body.appendChild(title)

4.2 插件系统

Vite 拥有强大的插件系统，允许开发者扩展和定制 Vite 的功能。插件可以在不同的阶段介入 Vite 的构建流程。

4.2.1 使用官方插件

Vite 提供了一些官方插件，如 Vue 插件、React 插件等。这些插件可以极大地简化特定框架的配置。

安装 Vue 插件

npm install @vitejs/plugin-vue --save-dev

配置 Vue 插件

在 vite.config.js 中添加插件配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

4.2.2 创建自定义插件

你可以创建自定义插件来扩展 Vite 的功能。Vite 插件本质上是一个包含钩子的对象。

插件基础结构

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin', // 插件名称
    // 插件钩子
    configResolved(config) {
      console.log('配置已解析:', config)
    }
  }
}

在 vite.config.js 中使用自定义插件：

// vite.config.js
import { defineConfig } from 'vite'
import myPlugin from './my-plugin'

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

4.2.3 插件钩子

Vite 插件系统提供了多种钩子，你可以在这些钩子中执行特定的逻辑。以下是一些常用的钩子：

config

在解析 Vite 配置之前调用，可以修改或返回新的配置：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    config(config) {
      return {
        ...config,
        define: {
          __VERSION__: JSON.stringify('1.0.0')
        }
      }
    }
  }
}

configResolved

在 Vite 配置解析之后调用，可以读取最终的配置：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    configResolved(config) {
      console.log('配置已解析:', config)
    }
  }
}

transform

在转换模块代码时调用，可以修改代码内容：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code.replace('__VERSION__', '1.0.0')
      }
    }
  }
}

buildStart

在构建开始时调用，可以执行构建前的准备工作：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    buildStart() {
      console.log('构建开始')
    }
  }
}

buildEnd

在构建结束时调用，可以执行清理或收尾工作：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    buildEnd() {
      console.log('构建结束')
    }
  }
}

4.2.4 插件开发注意事项

插件顺序

插件是按顺序执行的，先添加的插件会先执行。你可以通过插件的 enforce 属性指定插件的执行顺序：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    enforce: 'pre', // 'pre' 表示在内置插件之前执行, 'post' 表示在内置插件之后执行
    transform(code, id) {
      // 插件逻辑
    }
  }
}

调试插件

在开发插件时，可以通过在各个钩子中添加日志来调试插件的行为：

// my-plugin.js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      console.log('处理文件:', id)
      return code
    }
  }
}