记rspack想提issuse，提太慢白嫖不上了

昨天下午在研究了rspack， 在使用cli创建项目时，偶然发现一个bug， 会导致quick Start的项目启动时候会导致ts类型错误 本来打算提个issue，Pr，偷懒一下想等第二天，结果提一半被修好了

pnpm create rspack
# 项目名称随意
# 选择react
# 选择ts
# 随意
cd 进项目

pnpm i
pnpm dev

// rspack.config.ts
import * as RefreshPlugin from "@rspack/plugin-react-refresh"

...

plugins: [
		new rspack.HtmlRspackPlugin({
			template: "./index.html"
		}),
		
// 报错的一行
		isDev ? new RefreshPlugin() : null
	].filter(Boolean),

今天早上刚写了issue一半，发现复现不了，代码还是一样的，原来刚好被修了

检查一下发现是 @rspack/plugin-react-refresh 这个库的原因

// package.json 
"@rspack/plugin-react-refresh": "^1.2.0",

从 有错误的版本 1.3.0 更新到 1.3.1 了

github.com/rspack-cont…

可以发现1.3.0进行了这部分修改，然后1.3.1又改回来了

再切入一段报错代码具体情况

// rspack.config.ts
import * as RefreshPlugin from "@rspack/plugin-react-refresh"

...

plugins: [
		new rspack.HtmlRspackPlugin({
			template: "./index.html"
		}),
		
// 报错的一行
		isDev ? new RefreshPlugin() : null
	].filter(Boolean),

想一下我们的es导入和导出方式

// esm 命名空间导入
import * as RefreshPlugin from "@rspack/plugin-react-refresh"
// 或 命名导入
import { RefreshPlugin } from "@rspack/plugin-react-refresh"

// cjs
const RefreshPlugin = require("@rspack/plugin-react-refresh")

// ts 特有语法，兼容CommonJs/AMD
export = ReactRefreshRspackPlugin

// 默认导出 可以使用任意名称导入
export default ReactRefreshRspackPlugin

// 命名导出
export { ReactRefreshRspackPlugin }

这里普及一下 ts语法 export = （，对应的导入方式如下

import xxx = require('模块路径');
import * as xxx from '模块路径';

// ts配置esModuleInterop才可使用
import xxx from '模块路径';  // 需要 esModuleInterop: true

所以 1.3.0 的 export { ReactRefreshRspackPlugin } 是具名导出

import * as RefreshPlugin from "@rspack/plugin-react-refresh" 会导致所有导出内容放在 RefreshPlugin 对象下，需要通过RefreshPlugin.ReactRefreshRspackPlugin 访问

小螃蟹可爱