Skip to content

Commit 6fb7336

Browse files
committed
docs: update migrate docs
1 parent 4334c40 commit 6fb7336

File tree

1 file changed

+129
-26
lines changed

1 file changed

+129
-26
lines changed

website/docs/guide/advanced/update-from-icejs2.md

Lines changed: 129 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ order: 0902
1212

1313
### 依赖修改
1414

15+
#### 框架依赖
16+
1517
```diff
1618
{
1719
"devDependencies": {
@@ -22,40 +24,146 @@ order: 0902
2224
}
2325
```
2426

25-
对应插件能力:
26-
- @ali/build-plugin-ice-def -> @ali/ice-plugin-def
27-
- build-plugin-moment-locales -> @ice/plugin-moment-locales
28-
- build-plugin-fusion -> @ice/plugin-fusion (多主题能力暂不支持)
29-
- build-plugin-antd -> @ice/plugin-antd
30-
- build-plugin-css-assets-local -> @ice/plugin-css-assets-local
31-
- build-plugin-jsx-plus -> @ice/plugin-jsx-plus [文档](../advanced/jsx-plus.md)
32-
- build-plugin-keep-alive 不再支持,有 ice.js 3.0 的 [keep alive 方案](../advanced/keep-alive.md)替代
27+
#### 插件依赖
28+
##### @ali/build-plugin-ice-def
29+
插件替换为 `@ali/ice-plugin-def`,使用版本 1.2.4+,使用方式:
30+
31+
```ts title="ice.config.mts"
32+
import { defineConfig } from '@ice/app';
33+
import def from '@ali/ice-plugin-def';
34+
35+
export default defineConfig(() => ({
36+
plugins: [
37+
def(),
38+
],
39+
}));
40+
```
3341

34-
插件使用方式变更为函数调用:
42+
##### build-plugin-moment-locales
43+
44+
插件替换为 `@ice/plugin-moment-locales`,使用版本 1.0.2+,使用方式:
3545

3646
```ts title="ice.config.mts"
3747
import { defineConfig } from '@ice/app';
38-
import jsxPlus from '@ice/plugin-jsx-plus';
48+
import moment from '@ice/plugin-moment-locales';
3949

4050
export default defineConfig(() => ({
4151
plugins: [
42-
jsxPlus(),
52+
moment({
53+
locales: ['zh-CN'],
54+
}),
4355
],
4456
}));
4557
```
4658

59+
##### build-plugin-fusion
60+
替换为 `@ice/plugin-fusion`,使用版本 1.1.0+,使用方式:
61+
62+
```ts title="ice.config.mts"
63+
import { defineConfig } from '@ice/app';
64+
import fusion from '@ice/plugin-fusion';
65+
66+
export default defineConfig(() => ({
67+
plugins: [fusion({
68+
importStyle: true,
69+
themePackage: '@alifd/theme-design-pro',
70+
theme: {
71+
'primary-color': '#fff',
72+
},
73+
})],
74+
}));
75+
```
76+
77+
fusion 插件文档:[链接](../plugins/plugin-fusion.md)
78+
79+
> ice3 下的 fusion 插件不再支持多主题能力,仅支持配置 importStyle、themePackage 和 theme 三个配置项
80+
81+
##### build-plugin-antd
82+
83+
插件替换为 `@ice/plugin-antd`,使用版本 1.0.2+,使用方式:
84+
85+
```ts title="ice.config.mts"
86+
import { defineConfig } from '@ice/app';
87+
import antd from '@ice/plugin-antd';
88+
89+
export default defineConfig(() => ({
90+
plugins: [antd({
91+
dark: true,
92+
compact: true,
93+
theme: {
94+
'primary-color': '#fd8',
95+
},
96+
})],
97+
}));
98+
```
99+
100+
antd 插件文档:[链接](../advanced/antd.md)
101+
102+
##### build-plugin-css-assets-local
103+
104+
插件替换为 `@ice/plugin-css-assets-local`,使用版本 1.0.2+,使用方式:
105+
106+
```ts title="ice.config.mts"
107+
import { defineConfig } from '@ice/app';
108+
import cssAssetsLocal from '@ice/plugin-css-assets-local';
109+
110+
export default defineConfig(() => ({
111+
plugins: [
112+
cssAssetsLocal(),
113+
],
114+
}));
115+
```
116+
117+
css-assets-local 插件文档:[链接](../advanced/css-assets-local.md)
118+
119+
##### build-plugin-jsx-plus
120+
121+
插件替换为 `@ice/plugin-jsx-plus`,使用版本 1.0.4+,使用方式:
122+
123+
```ts title="ice.config.mts"
124+
import { defineConfig } from '@ice/app';
125+
import jsxplus from '@ice/plugin-jsx-plus';
126+
127+
export default defineConfig(() => ({
128+
plugins: [
129+
jsxplus({
130+
// options
131+
}),
132+
],
133+
}));
134+
```
135+
136+
jsx-plus 插件文档:[链接](../advanced/jsx-plus.md)
137+
138+
##### build-plugin-keep-alive
139+
140+
ice 3 不再支持插件形式的 keep-alive 方案。由框架内置提供的 `<KeepAliveOutlet />` 组件替代。
141+
keep-alive 插件文档:[链接](../advanced/keep-alive.md)
142+
47143
> 完成依赖升级后推荐重新安装依赖,即执行 npm update
48144
49145
### 工程配置文件升级
50146

51147
为了获取更好的类型提示,ice 新版本中推荐使用 ts 文件进行配置,即在项目目录下新增 `ice.config.mts` 文件,原 json 中的能力支持情况如下:
52148

149+
#### 命令行参数
150+
151+
| ice 2.x | ice 3.0 | 备注 |
152+
| ---- | ---- | ---- |
153+
| --port | --port | - |
154+
| --host | --host | - |
155+
| --config | --config | - |
156+
| --disable-open | --no-open | - |
157+
| --disable-mock | --no-mock | - |
158+
| --https | --https | - |
159+
| --analyzer | --analyzer | - |
160+
| --disable-assets || 不常用通过环境变量控制日志输出详细程度 |
161+
| --disable-reload || 配置禁止 fastRefresh |
162+
163+
#### 配置项
164+
53165
| ice 2.x | ice 3.0 | 备注 |
54166
| ---- | ---- | ---- |
55-
| --port || - |
56-
| --host || - |
57-
| --config || - |
58-
| --disable-open || - |
59167
| plugins || - |
60168
| alias || - |
61169
| publicPath || - |
@@ -67,9 +175,6 @@ export default defineConfig(() => ({
67175
| proxy || - |
68176
| define || - |
69177
| ssr || - |
70-
| --disable-mock || - |
71-
| --https || - |
72-
| --analyzer || - |
73178
| dropLogLevel || - |
74179
| minify || 简化配置(true/false) |
75180
| compileDependencies || 配合现有的 compileIncludes 能力 |
@@ -78,8 +183,6 @@ export default defineConfig(() => ({
78183
| postcssOptions / postcssrc || - |
79184
| polyfill || 需要主动开启 |
80185
| remoteRuntime || - |
81-
| --disable-assets || 不常用通过环境变量控制日志输出详细程度 |
82-
| --disable-reload || 配置禁止 fastRefresh |
83186
| terser || 内置方案 |
84187
| outputAssetsPath || 后续输出最佳目录实践 |
85188
| devServer || 不支持全量配置 devServer,按需开启 server 相关能力 |
@@ -93,7 +196,7 @@ export default defineConfig(() => ({
93196
| swc || - |
94197
| store / auth / request / pwa / router || 通过定制的插件支持 |
95198
| disableRuntime || - |
96-
| babelPlugins / babelPresets / webpackPlugins / webpackLoaders || 不推荐直接配置 |
199+
| babelPlugins / babelPresets / webpackPlugins / webpackLoaders || 不推荐直接配置,如果有定制需求通过 webpack 配置进行迁移 |
97200

98201
ice.js 3 新版本中不再支持 vite 模式,并且 webpack 相关的快捷配置也不再支持。我们将会将内置的逻辑做到最优。如果存在 webpack 定制需求,可以参考如下自定义方式定制:
99202

@@ -113,11 +216,11 @@ export default defineConfig(() => ({
113216
// 修改内置的 webpack 规则,借助官方工具可以更便捷的修改
114217
// 修改 css 样式规则下的 postcss-loader 配置项
115218
return modifyLoader(webpackConfig, {
116-
rule: '.css',
117-
loader: 'postcss-loader',
118-
options: (originOptions) => ({}),
119-
});
120-
}
219+
rule: '.css',
220+
loader: 'postcss-loader',
221+
options: (originOptions) => ({}),
222+
});
223+
},
121224
}));
122225
```
123226

0 commit comments

Comments
 (0)