# @cabloy/vite-plugin-babel 中文文档

规范地址：https://npmcn.com/package/%40cabloy/vite-plugin-babel/

版本：1\.3\.3
npm 元数据更新时间：2026-03-22T13:32:20.281Z
中文译文更新时间：2026-11-08T23:09:29.140Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cabloy/vite-plugin-babel
原文对照：https://npmcn.com/package/%40cabloy/vite-plugin-babel/?lang=original
项目主页：https://github.com/owlsdepartment/vite-plugin-babel#readme
源码仓库：https://github.com/owlsdepartment/vite-plugin-babel

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：16.1 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@babel/core ^7\.29\.0，vite ^2\.7\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0 \|\| ^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0
- 首次发布：2024-03-30T10:11:06.345Z
- 最新版本发布：2026-03-22T13:32:20.163Z
- 近 30 天下载量：5964（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 1 个）

## 中文简介

在所有命令中运行 Vite 中的 Babel

## 安装

```sh
npm install @cabloy/vite-plugin-babel
```

也可以使用：`pnpm add @cabloy/vite-plugin-babel`、`yarn add @cabloy/vite-plugin-babel`、`bun add @cabloy/vite-plugin-babel`

## README

# 虚拟插件 Babel

在任何Vite命令中运行 Babel, 在服役期间也是如此.

## 动机

大部分 Vite 插件只在期间运行 Babel `build`没有 `serve`,只有其他可能的方法 [@vitejs/插件反应](https://www.npmjs.com/package/@vitejs/plugin-react). ESBuild是真棒工具,但并不支持一些实验性特征,比如装饰者(英语:[第2349号问题](https://github.com/vitejs/vite/issues/2349))或类实例字段,出框. 你可以在TypeScript中使用,但不是纯JS. 此插件是为了允许使用这些特性, 并运行 bail 在 `optimizeDeps`, (中文(简体) ), `dev` 财务报告和审定财务报表 `build` 级,但可以配置.

## 安装

```bash
# yarn
yarn add -D vite-plugin-babel

# npm
npm install -D vite-plugin-babel
```

## 使用量

添加到您的 Vite 配置

```js
import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';

export default defineConfig({
    plugins: [
        // Babel will try to pick up Babel config files (.babelrc or .babelrc.json)
        babel(),
        // ...
    ],

    // ...
})
```

## 配置

Babel 配置可以传递给 `babelConfig` 字段或通过 Babel 配置文件。 所有bayl选项见: [Babel 选项](https://babeljs.io/docs/en/options)。 。 。 .

默认情况下,Bail会运行JS/JSX文件. 你可以改变那个Vie `filter` 选项.

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `apply` | `'serve' | 'build' | (config: UserConfig, env: ConfigEnv) => boolean` | `undefined` | 将插件的使用限制为只构建或只服务 。 如果没有具体说明,将在两个周期内运行。 与 [`apply` 在虚拟插件 API 中](https://vite.dev/guide/api-plugin.html#conditional-application) |
| `enforce` | `'pre' | 'post'` | `pre` | 强制插件的命令执行 。 详情: [虚拟插件排序](https://vite.dev/guide/api-plugin.html#plugin-ordering) |
| `babelConfig` | `object` | `{}` | [Babel 变形选项](https://babeljs.io/docs/en/options) |
| `filter` | `RegExp | (id: string) => boolean` | `/\.jsx?$/` | 哪些文件是Bail申请的 默认是js/jsx文件. 您可以通过一个接受文件名并返回的过滤功能 `true | false` |
| `include` | `string | RegExp | Array<string|RegExp>)` | `undefined` | 包含哪些文件。 如果省略,则包括全部 |
| `exclude` | `string | RegExp | Array<string|RegExp>)` | `undefined` | 哪些文件可以排除。 如果使用时 `include`,它具有更高的优先级,并且可以排除文件,与文件匹配 `include` 模式 |
| `loader` | `Loader` 或者说 `(path: string) => Loader` | `undefined` | 这告诉人们如何在贝尔变身后解释内容. 例如,js加载器将内容解释为JavaScript,而cs加载器将内容解释为CSS. 装载器默认为js,如果它没有指定的话. 见 [内容类型](https://esbuild.github.io/content-types) 所有内置加载器的完整列表. |

## 提示

Vite团队没有启用并且默认包括了Babel,因为他们希望尽可能快地保持经验,而Esbuild已经可以做很多事情了,你可能会做Babel. 因此,我们建议只包括你真正需要的 Babel 插件。 您可以使用选项 `babelConfig.configFile` 并禁用 Babel 配置文件, 例如 :

```js
babel({
    babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: ['@babel/plugin-proposal-decorators']
    }
})
```

或仅仅使用 `.babelrc.json`。 。 。 .

**注:** 任何bail插件和预设需要单独安装,不包含在这个包中.

## 解决问题

#### \[错误\] 目前未启用 JSX 语法扩展

这通常发生在您使用此插件只转换一个插件的部分时 `.jsx` file(例如装饰器),而JSX语法未加修改。 默认情况下, Esbuild 将内容解释为 `.js`,所以你需要指定装填器 esbuild 使用.

示例

```js
import { extname } from 'path';
// ...
babel({
    babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: ['@babel/plugin-proposal-decorators'],
        
        // uses the jsx loader for .jsx files
        loader: path => {
          if (extname(path) === '.jsx') {
            return 'jsx';
          }
        },
    }
})
```

## 许可证

图书馆项下 [MIT 许可证](https://npmcn.com/package/%40cabloy/vite-plugin-babel/LICENSE)

## 常见问题

### @cabloy/vite-plugin-babel 是什么？

在所有命令中运行 Vite 中的 Babel

### 如何安装 @cabloy/vite-plugin-babel？

在项目目录运行 npm install @cabloy/vite-plugin-babel，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@babel/core（^7\.29\.0）、vite（^2\.7\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0 \|\| ^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cabloy/vite-plugin-babel 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cabloy/vite-plugin-babel 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cabloy/vite-plugin-babel 可以商用吗？

@cabloy/vite-plugin-babel 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cabloy/vite-plugin-babel 的下载量有多少？

根据 npm 官方下载统计，@cabloy/vite-plugin-babel 在 2026/10/09 – 2026/11/07 这 30 天内被下载 5,964 次，日均约 199 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cabloy/vite-plugin-babel 还在维护吗？

最新版本 1\.3\.3 发布于 2026/03/22（7 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 1 个；首次发布于 2024/03/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。