vite plugin react swc

@vitejs/plugin-react-swc

使用SWC加速您的Vite Dev服务器

• ✅快速快速刷新（比Babel快〜20倍）
• ✅启用自动JSX运行时

安装

npm i -D @vitejs/plugin-react-swc

用法

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

export default defineConfig ( {
  plugins : [ react ( ) ] ,
} ) ; 

警告

该插件的选项有限，可以实现良好的性能并成为不可知论者。这是影响运行时行为的非配置选项的列表：

• UsedefineForClassfields总是被激活，因为这与当前的Ecmasipript规格匹配
• jsx runtime始终是automatic
• 在开发中：
  • Esbuild被禁用，因此Esbuild配置没有效果
  • 忽略target并默认为es2020 （请参阅devTarget ）
  • JS文件未转换
  • Tsconfig无法解决，因此除了上面列出的属性以外的属性，例如TS默认值

选项

JSXimportSource

控制JSX工厂的进口位置。

@default “ React”

 react ( { jsxImportSource : "@emotion/react" } ) ;

tsdecorators

启用打字稿装饰器。需要在TSCONFIG中experimentalDecorators 。

@default false

 react ( { tsDecorators : true } ) ;

插件

使用SWC插件。在构建时间启用SWC。

 react ( { plugins : [ [ "@swc/plugin-styled-components" , { } ] ] } ) ;

Devtarget

在开发人员中设置SWC的目标。例如，这可以避免减少转移的私人类方法。

有关生产目标，请参见https://vitejs.dev/config/build-options.html#build-target。

@default “ ES2020”

 react ( { devTarget : "es2022" } ) ;

parserconfig

覆盖默认值包括列表（.ts，.tsx，.mts，.jsx，.mdx）。

这需要重新定义要包含的任何文件的配置（TS，MDX，...）。

如果您想在编译JS上触发快速刷新，请使用jsx: true 。如果需要，应由该功能处理Node_Modules的排除。使用此选项在.js文件中使用JSX是高度灰心的，并且可以在任何以后的版本中删除。

 react ( {
  parserConfig ( id ) {
    if ( id . endsWith ( ".res" ) ) return { syntax : "ecmascript" , jsx : true } ;
    if ( id . endsWith ( ".ts" ) ) return { syntax : "typescript" , tsx : false } ;
  } ,
} ) ; 

一致的组件出口

对于React刷新正确工作，您的文件应仅导出React组件。我读过的最好的解释是盖茨比文档中的解释。

如果发现出口不兼容的变化，则该模块将无效，HMR将传播。为了使与组件并肩导出简单常数变得更容易，仅当模块变化时，该模块才会无效。

您可以捕获错误，并使用此ESLINT规则获得更详细的警告。

从vite-plugin-swc-react-refresh迁移

插件的先前版本的文档可在V2分支中获得

要迁移，请参阅此更改