ant.mobile 1.0 -> 2.0 升级需要注意的问题

这次升级的原因是 less 部分需要进行加载
组件下架, 无法进行运行
php 方式来写入css, 打包部分还需要进行 php 支持

还需要解决的问题是

  1. 根据环境来进行环境的配置, 不需要更改环境配置
  2. 打包不同的环境(还需要进行文件的复制)
  3. 文件调用使用 @ 方式来引入

1) svg 无法进行加载

React 加载 SVG 的说明 : Adding Svgs

将 SVG 作为 React 组件, 可以使用以下的这种方式.

1
2
3
4
5
6
7
8
9
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}

2) 关于不同的打包环境

此问题参考原来 React 项目多环境打包是如此的简单

1
2
3
4
5
6
7
{
...
"scripts": {
"start:bz": "cp -R env/baozi/* public/ && dotenv -e env/.env.dev.bz react-app-rewired start",
}
...
}

3) [WIP]文件使用相对路径来进行引用

Add Webpack Alias With react-app-rewired and customize-cra

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* global require, module, __dirname */
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
addWebpackAlias({
['@']: path.resolve(__dirname, 'src')
})
)

但是这样webstorm 无法识别路径的映射, 这样需要找寻另外一种方式
React提高08 Create React App

但是这种方式无法使用 webstorm 来对react 进行提示导致出错

如果使用了之后, 默认的则是第二个, 就没有办法进行代码提示了


语雀镜像 : ant.mobile 1.0 -> 2.0 升级需要注意的问题 ,点此 提问

ant.mobile 1.0 -> 2.0 升级需要注意的问题

https://wulicode.com/web/ant-design-mobile-upgrade-1.0-2.0.html

作者

Duoli

发布于

2021-06-26

更新于

2022-11-22

许可协议

评论