Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb64dd32

Browse files
committed
Update README to reflect configuration file change from win.config.ts to .winrc.ts and add autoImport feature to index.ts
1 parent99f803a commitb64dd32

File tree

4 files changed

+177
-1
lines changed

4 files changed

+177
-1
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ npm install @winner-fed/preset-react
2323

2424
##基础用法
2525

26-
在`win.config.ts` 中添加：
26+
在`.winrc.ts` 中添加：
2727

2828
```ts
2929
import {defineConfig }from'win';

‎src/features/autoImport/README.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
#React 自动导入功能
2+
3+
本模块实现了基于`unplugin-auto-import` 的 React hooks 和 React Router 组件的自动导入。
4+
5+
##功能特性
6+
7+
###自动导入的 API
8+
9+
####React Hooks 和组件
10+
-`useState`,`useEffect`,`useCallback`,`useMemo`
11+
-`useRef`,`useContext`,`useReducer`
12+
-`useLayoutEffect`,`useImperativeHandle`
13+
-`useDeferredValue`,`useId`,`useTransition`
14+
-`createElement`,`Fragment`,`Suspense`,`lazy`
15+
-`forwardRef`,`memo`,`createContext`
16+
17+
####React Router（仅在非 MPA 模式下）
18+
-`BrowserRouter`,`Routes`,`Route`,`Link`,`NavLink`
19+
-`useNavigate`,`useLocation`,`useParams`
20+
-`useSearchParams`,`useRoutes`,`Outlet`
21+
22+
##打包器支持
23+
24+
- ✅ Webpack
25+
- ✅ Vite
26+
- ✅ Rsbuild (基于 Rspack)
27+
28+
##配置说明
29+
30+
###MPA 模式处理
31+
32+
在 MPA（多页应用）模式下，React Router 相关的自动导入会被自动禁用，因为 MPA 不需要客户端路由。
33+
34+
###类型定义
35+
36+
`dts` 设置为`false`，因为 WinJS 框架会统一处理 TypeScript 类型定义。
37+
38+
###ESLint 集成
39+
40+
`eslintrc.enabled` 设置为`false`，避免生成额外的 ESLint 配置文件。
41+
42+
##使用示例
43+
44+
```tsx
45+
// 无需手动导入 React hooks
46+
exportdefaultfunction Counter() {
47+
const [count, setCount]=useState(0);
48+
49+
useEffect(()=> {
50+
console.log('Count changed:',count);
51+
}, [count]);
52+
53+
const doubleCount=useMemo(()=>count*2, [count]);
54+
55+
return (
56+
<div>
57+
<p>计数:{count}</p>
58+
<p>双倍:{doubleCount}</p>
59+
<buttononClick={()=>setCount(count+1)}>增加</button>
60+
</div>
61+
);
62+
}
63+
```
64+
65+
##实现细节
66+
67+
模块通过拦截不同打包器的配置钩子，注入`unplugin-auto-import` 插件：
68+
69+
-**Webpack**: 通过`api.modifyWebpackConfig` 注入
70+
-**Vite**: 通过`api.modifyViteConfig` 注入
71+
-**Rsbuild**: 通过`api.modifyRsbuildConfig` 修改`tools.rspack` 配置注入
72+
73+
每个打包器使用对应的 unplugin 入口点：
74+
-`unplugin-auto-import/webpack`
75+
-`unplugin-auto-import/vite`
76+
-`unplugin-auto-import/rspack`
77+
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
importtype{IApi}from'@winner-fed/winjs';
2+
importAutoImportRspackfrom'unplugin-auto-import/rspack';
3+
importAutoImportVitefrom'unplugin-auto-import/vite';
4+
importAutoImportWebpackfrom'unplugin-auto-import/webpack';
5+
6+
exportdefault(api:IApi)=>{
7+
api.describe({
8+
key:'preset-react:autoImport',
9+
});
10+
11+
// 根据是否为 MPA 模式动态生成配置
12+
constgetAutoImportConfig=()=>{
13+
constimports:any[]=[
14+
// React hooks 和 API
15+
{
16+
react:[
17+
'useState',
18+
'useEffect',
19+
'useCallback',
20+
'useMemo',
21+
'useRef',
22+
'useContext',
23+
'useReducer',
24+
'useLayoutEffect',
25+
'useImperativeHandle',
26+
'useDeferredValue',
27+
'useId',
28+
'useTransition',
29+
'createElement',
30+
'Fragment',
31+
'Suspense',
32+
'lazy',
33+
'forwardRef',
34+
'memo',
35+
'createContext',
36+
],
37+
},
38+
];
39+
40+
// MPA 模式不需要 React Router
41+
if(!api.userConfig.mpa){
42+
imports.push({
43+
'react-router':[
44+
'BrowserRouter',
45+
'Routes',
46+
'Route',
47+
'Link',
48+
'NavLink',
49+
'useNavigate',
50+
'useLocation',
51+
'useParams',
52+
'useSearchParams',
53+
'useRoutes',
54+
'Outlet',
55+
],
56+
});
57+
}
58+
59+
return{
60+
imports,
61+
dts:false,// WinJS 会处理类型定义
62+
eslintrc:{
63+
enabled:false,
64+
},
65+
};
66+
};
67+
68+
// Webpack 集成
69+
api.modifyWebpackConfig((config)=>{
70+
config.plugins=config.plugins||[];
71+
config.plugins.push(AutoImportWebpack(getAutoImportConfig()));
72+
returnconfig;
73+
});
74+
75+
// Vite 集成
76+
api.modifyViteConfig((config:any)=>{
77+
config.plugins=config.plugins||[];
78+
config.plugins.push(AutoImportVite(getAutoImportConfig()));
79+
returnconfig;
80+
});
81+
82+
// Rsbuild 集成 (基于 Rspack)
83+
api.modifyRsbuildConfig((config:any)=>{
84+
config.tools=config.tools||{};
85+
constoriginalRspack=config.tools.rspack;
86+
87+
config.tools.rspack=(rspackCfg:any)=>{
88+
constcfg=
89+
typeoforiginalRspack==='function'
90+
?originalRspack(rspackCfg)
91+
:originalRspack||rspackCfg;
92+
cfg.plugins=cfg.plugins||[];
93+
cfg.plugins.push(AutoImportRspack(getAutoImportConfig()));
94+
returncfg;
95+
};
96+
returnconfig;
97+
});
98+
};

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default (api: IApi) => {
3232
// React特有功能
3333
require.resolve('./features/forget/forget'),
3434
require.resolve('./features/icons/icons'),
35+
require.resolve('./features/autoImport/autoImport'),
3536
],
3637
};
3738
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp