Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 129 additions & 26 deletions website/docs/guide/advanced/update-from-icejs2.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ order: 0902

### 依赖修改

#### 框架依赖

```diff
{
"devDependencies": {
Expand All @@ -22,40 +24,146 @@ order: 0902
}
```

对应插件能力:
- @ali/build-plugin-ice-def -> @ali/ice-plugin-def
- build-plugin-moment-locales -> @ice/plugin-moment-locales
- build-plugin-fusion -> @ice/plugin-fusion (多主题能力暂不支持)
- build-plugin-antd -> @ice/plugin-antd
- build-plugin-css-assets-local -> @ice/plugin-css-assets-local
- build-plugin-jsx-plus -> @ice/plugin-jsx-plus [文档](../advanced/jsx-plus.md)
- build-plugin-keep-alive 不再支持,有 ice.js 3.0 的 [keep alive 方案](../advanced/keep-alive.md)替代
#### 插件依赖
##### @ali/build-plugin-ice-def
插件替换为 `@ali/ice-plugin-def`,使用版本 1.2.4+,使用方式:

```ts title="ice.config.mts"
import { defineConfig } from '@ice/app';
import def from '@ali/ice-plugin-def';

export default defineConfig(() => ({
plugins: [
def(),
],
}));
```

插件使用方式变更为函数调用:
##### build-plugin-moment-locales

插件替换为 `@ice/plugin-moment-locales`,使用版本 1.0.2+,使用方式:

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

export default defineConfig(() => ({
plugins: [
jsxPlus(),
moment({
locales: ['zh-CN'],
}),
],
}));
```

##### build-plugin-fusion
替换为 `@ice/plugin-fusion`,使用版本 1.1.0+,使用方式:

```ts title="ice.config.mts"
import { defineConfig } from '@ice/app';
import fusion from '@ice/plugin-fusion';

export default defineConfig(() => ({
plugins: [fusion({
importStyle: true,
themePackage: '@alifd/theme-design-pro',
theme: {
'primary-color': '#fff',
},
})],
}));
```

fusion 插件文档:[链接](../plugins/plugin-fusion.md)

> ice3 下的 fusion 插件不再支持多主题能力,仅支持配置 importStyle、themePackage 和 theme 三个配置项

##### build-plugin-antd

插件替换为 `@ice/plugin-antd`,使用版本 1.0.2+,使用方式:

```ts title="ice.config.mts"
import { defineConfig } from '@ice/app';
import antd from '@ice/plugin-antd';

export default defineConfig(() => ({
plugins: [antd({
dark: true,
compact: true,
theme: {
'primary-color': '#fd8',
},
})],
}));
```

antd 插件文档:[链接](../advanced/antd.md)

##### build-plugin-css-assets-local

插件替换为 `@ice/plugin-css-assets-local`,使用版本 1.0.2+,使用方式:

```ts title="ice.config.mts"
import { defineConfig } from '@ice/app';
import cssAssetsLocal from '@ice/plugin-css-assets-local';

export default defineConfig(() => ({
plugins: [
cssAssetsLocal(),
],
}));
```

css-assets-local 插件文档:[链接](../advanced/css-assets-local.md)

##### build-plugin-jsx-plus

插件替换为 `@ice/plugin-jsx-plus`,使用版本 1.0.4+,使用方式:

```ts title="ice.config.mts"
import { defineConfig } from '@ice/app';
import jsxplus from '@ice/plugin-jsx-plus';

export default defineConfig(() => ({
plugins: [
jsxplus({
// options
}),
],
}));
```

jsx-plus 插件文档:[链接](../advanced/jsx-plus.md)

##### build-plugin-keep-alive

ice 3 不再支持插件形式的 keep-alive 方案。由框架内置提供的 `<KeepAliveOutlet />` 组件替代。
keep-alive 插件文档:[链接](../advanced/keep-alive.md)

> 完成依赖升级后推荐重新安装依赖,即执行 npm update

### 工程配置文件升级

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

#### 命令行参数

| ice 2.x | ice 3.0 | 备注 |
| ---- | ---- | ---- |
| --port | --port | - |
| --host | --host | - |
| --config | --config | - |
| --disable-open | --no-open | - |
| --disable-mock | --no-mock | - |
| --https | --https | - |
| --analyzer | --analyzer | - |
| --disable-assets | ❌ | 不常用通过环境变量控制日志输出详细程度 |
| --disable-reload | ❌ | 配置禁止 fastRefresh |

#### 配置项

| ice 2.x | ice 3.0 | 备注 |
| ---- | ---- | ---- |
| --port | ✅ | - |
| --host | ✅ | - |
| --config | ✅ | - |
| --disable-open | ✅ | - |
| plugins | ✅ | - |
| alias | ✅ | - |
| publicPath | ✅ | - |
Expand All @@ -67,9 +175,6 @@ export default defineConfig(() => ({
| proxy | ✅ | - |
| define | ✅ | - |
| ssr | ✅ | - |
| --disable-mock | ✅ | - |
| --https | ✅ | - |
| --analyzer | ✅ | - |
| dropLogLevel | ✅ | - |
| minify | ✅ | 简化配置(true/false) |
| compileDependencies | ✅ | 配合现有的 compileIncludes 能力 |
Expand All @@ -78,8 +183,6 @@ export default defineConfig(() => ({
| postcssOptions / postcssrc | ✅ | - |
| polyfill | ✅ | 需要主动开启 |
| remoteRuntime | ❌ | - |
| --disable-assets | ❌ | 不常用通过环境变量控制日志输出详细程度 |
| --disable-reload | ❌ | 配置禁止 fastRefresh |
| terser | ❌ | 内置方案 |
| outputAssetsPath | ❌ | 后续输出最佳目录实践 |
| devServer | ❌ | 不支持全量配置 devServer,按需开启 server 相关能力 |
Expand All @@ -93,7 +196,7 @@ export default defineConfig(() => ({
| swc | ❌ | - |
| store / auth / request / pwa / router | ❌ | 通过定制的插件支持 |
| disableRuntime | ❌ | - |
| babelPlugins / babelPresets / webpackPlugins / webpackLoaders | ❌ | 不推荐直接配置 |
| babelPlugins / babelPresets / webpackPlugins / webpackLoaders | ❌ | 不推荐直接配置,如果有定制需求通过 webpack 配置进行迁移 |

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

Expand All @@ -113,11 +216,11 @@ export default defineConfig(() => ({
// 修改内置的 webpack 规则,借助官方工具可以更便捷的修改
// 修改 css 样式规则下的 postcss-loader 配置项
return modifyLoader(webpackConfig, {
rule: '.css',
loader: 'postcss-loader',
options: (originOptions) => ({}),
});
}
rule: '.css',
loader: 'postcss-loader',
options: (originOptions) => ({}),
});
},
}));
```

Expand Down
Loading