vite-plugin-babel

vite-plugin-babel 是专为 Vite 构建工具设计的插件，允许你将 Babel 转译器集成到你的 Vite 项目中。这赋予了你的项目更强大的能力，如 [JavaScript装饰器提案] 所示。

注意： 尽管已经存在 owlsdepartment 的 vite-plugin-babel，承诺将Babel支持集成到Vite中， 但我们发现，该插件在处理 Vue 单文件组件（SFCs）时会出现一些挑战。经过对其源代码的仔细检查， 我们发现为了实现准确的转译，必须在 vite-plugin-vue 处理源代码后应用 Babel。然而， owlsdepartment 的插件在其 config() 阶段调用了 esbuildPluginBabel()，而 esbuildPluginBabel() 试图在其 setup() 函数中调用 Babel 转换源代码。 这个顺序导致 Babel 的转译发生在 vite-plugin-vue 处理代码之前。 因此，我们决定开发一个新的插件来正确处理这个过程。

安装

您可以使用 npm 安装该插件：

npm install --save-dev @haixing_hu/vite-plugin-babel

或者使用 yarn：

yarn add --dev @haixing_hu/vite-plugin-babel

使用方法

在你的 Vite 配置文件 vite.config.js 中引入并使用该插件：

import babel from '@haixing_hu/vite-plugin-babel';

export default {
  plugins: [
    // ...
    babel()
  ]
}

注意： 通常我们应该将该插件放在所有插件最后，从而使得此插件可以在前面其他插件处理完源码文件 后再对源码文件利用 Babel 进行转译。例如，如果您的 Vite 项目使用了 vite-plugin-vue 插件，应该将此插件放在 vite-plugin-vue 插件之后，从而可以使得 Babel 转译的源码文件是经 过 vite-plugin-vue 插件处理过的。

配置选项

该插件支持一些配置选项，你可以在插件初始化时传递给它。以下是可能的配置选项和默认值：

| 选项 | 类型 | 默认值 | 说明 | |----------|----------|----------------------|-----------------------------------------| | config | object | {} | 用于初始化 Babel 转译器的对象，包含了 Babel 配置选项 。 | | filter | RegExp | /\.(jsx? \| vue)$/ | 用于匹配需要转译的源码文件的正则表达式。 |

示例

假设我们用 create-vue 创建了一个 Vue 项目，然后我们想要在项目中使用 vue3-class-component 以支持通过 JavaScript 类编写 Vue 组件，我们需要为该项目提供 Babel 及相关插件， 从而可以使用最新的 JavaScript 装饰器提案 语法。

首先，我们需要安装 Babel 及相关插件：

yarn add @haixing_hu/vue3-class-component
yarn add --dev @babel/core @babel/runtime @babel/preset-env
yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
yarn add --dev @haixing_hu/vite-plugin-babel

接下来配置 Vite 项目的 vite.config.js 文件如下：

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import babel from '@haixing_hu/vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue({
      script: {
        babelParserPlugins: ['decorators'],  // 启用装饰器语法支持
      },
    }),
    babel({
      config: {                              // Babel 的配置直接嵌入在参数 config 中
        presets: [
          ["@babel/preset-env", { "modules": false }]
        ],
        plugins: [
          "@babel/plugin-transform-runtime",
          ["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
          "@babel/plugin-transform-class-properties"
        ],
      },
      filter: /\.(jsx? \| vue)$/,           // 此参数可以指定需要处理的文件名的正则表达式
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

在上面的配置中，我们直接在 vite-plugin-babel 插件的配置选项config中指定了 Babel 的配置选项，也可以将 Babel 的配置选项放在 .babelrc、.babelrc.json、或 babel.config.js 等配置文件中，然后使用 vite-plugin-babel 插件的默认配置，即

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import babel from '@haixing_hu/vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue({
      script: {
        babelParserPlugins: ['decorators'], // 启用装饰器语法支持
      },
    }),
    babel(),  // Babel 配置在 `.babelrc.json` 等默认配置文件中
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

具体可以参见 vue3-class-component-demo-vite 项目。

贡献

如果你发现任何问题或有改进建议，欢迎提交 issue 或者 PR 到本项目的 GitHub 仓库。

许可

此插件采用 Apache 2.0 许可证。详细信息请查阅 LICENSE 文件。