在Lingui.js项目中正确配置Vite与SWC插件

Lingui.js是一个强大的国际化解决方案，但在与Vite和SWC配合使用时，开发者可能会遇到一些配置问题。本文将详细介绍如何正确配置Lingui.js的SWC插件以避免常见错误。

常见配置错误分析

许多开发者在尝试将Lingui.js与Vite的SWC插件一起使用时，会遇到一个典型错误提示："The macro you imported from "@lingui/macro" is being executed outside the context of compilation"。这通常是由于配置不当导致的。

错误配置示例

一个常见的错误配置是在使用@vitejs/plugin-react-swc时，错误地尝试通过Babel配置来添加SWC插件：

react({
  babel: {
    plugins: [['@lingui/swc-plugin', {}]],
  },
}),

这种配置方式存在两个问题：

1. 使用了SWC插件却试图通过Babel配置
2. 在SWC环境下错误地使用了Babel配置项

正确配置方法

正确的做法是直接在Vite配置中正确设置SWC插件：

import { lingui } from '@lingui/vite-plugin';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    react({
      plugins: [['@lingui/swc-plugin', {}]],
    }),
    lingui(),
  ],
});

关键配置要点

1. 插件顺序：确保@lingui/vite-plugin在React插件之后
2. 配置位置：SWC插件应直接配置在React插件的plugins选项中
3. 避免混合：不要将Babel和SWC的配置方式混淆

为什么这样配置

Vite的SWC插件与Babel插件的工作方式不同。SWC插件需要在编译阶段直接处理代码，而不是通过Babel的转换管道。错误的配置会导致Lingui的宏无法在编译阶段被正确处理，从而出现运行时错误。

总结

正确配置Lingui.js与Vite和SWC的关键在于理解不同编译工具的工作方式差异。通过遵循上述配置方法，开发者可以避免常见的编译错误，确保国际化功能正常工作。记住，在使用SWC时，应该完全采用SWC的配置方式，而不是混合使用Babel的配置模式。