第 21 卷

• 示例： // 导入 JSON

（5）其他静态资源（如 txt、xml 等）

• 可通过 import 直接加载，Vite 会将其作为字符串返回（开发和生产环境一致）。
• 示例： import text from './info.txt';

console.log(text); // 输出 info.txt 的文本内容

1. 静态资源处理的自定义配置

Vite 支持通过配置自定义静态资源处理规则，满足特殊需求：

• 修改 Base64 转换阈值： // vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({ build: {

assetsInlineLimit: 8 * 1024 // 将 Base64 转换阈值改为 8KB（默认 4KB）

} });

• 自定义静态资源输出目录： // vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({ build: {

rollupOptions: { output: {

assetFileNames: 'static/[name].[hash].[ext]' // 静态资源输出到 dist/static 目录

} }

} });

• 排除特定静态资源的处理：通过 rollupOptions.external 排除，直接引用外部资源（如

export default defineConfig({ build: {

rollupOptions: { external: ['https://cdn.example.com/logo.png'], // 排除外部 CDN

资源 output: {

globals: { 'https://cdn.example.com/logo.png': 'Logo'

} }

} }

});

三、核心优势总结

• 打包过程：基于 Rollup 实现高效产物优化，内置 Tree Shaking、代码分割、压缩等功能，配置简

单，产物体积小。

• 静态资源处理：开发环境原生 ESM 支持，加载流畅；生产环境自动优化，兼顾性能和缓存；零配

置支持常见资源类型，开发成本低。

• 工具集成：内置 esbuild 提升打包和资源处理速度，比传统工具（如 Webpack）快 10-100

倍。

二十六、如何配置Babel以转译ES6+代码为向后兼容的JavaScript代码?

Babel 转译 ES6+ 代码的核心是通过“核心包+插件/预设”的组合实现，配置过程需遵循“安装依赖→ 创建配置文件→指定转译目标”的步骤，确保转译后的代码兼容目标浏览器/环境。以下是完整配置流

程：

1. 安装核心依赖

首先安装 Babel 运行所需的核心包和常用插件/预设（以 npm 为例）：

Code block

1npm install --save-dev @babel/core @babel/cli @babel/preset-env 2# @babel/core：Babel 核心编译模块（必装）

7# 替代方案：安装 core-js@3（更灵活的 polyfill 方案）

8npm install --save core-js@3

1. 创建 Babel 配置文件

Babel 支持多种配置文件格式（ .babelrc、 babel.config.json、 babel.config.js 等），推荐使用 babel.config.js（支持动态配置，适配 Monorepo 等复杂项目），在项目根目

录创建：

Code block

1// babel.config.js 2module.exports = {

3presets: [ 4[

5"@babel/preset-env", 6{

本、IE11

应的 polyfill）

14corejs: 3, // 指定 core-js 版本（需与安装的 core-js 版本一致）

15// 3. 可选：是否将 ES6 模块语法转为 CommonJS（默认 false，配合 Webpack 等工具时建议保持 false）

16modules: false, 17},

18], 19],

20plugins: [ 21// 可选：添加额外插件（如转译 class 私有属性、装饰器等）

22"@babel/plugin-proposal-class-properties", // 转译 class 私有属性（class A { #a = 1 }）