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

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

还需要解决的问题是

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

1) svg 无法进行加载

React 加载 SVG 的说明 : Adding Svgs

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

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

2) 关于不同的打包环境

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

{
   ...
	"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

/* 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 升级需要注意的问题 ,点此 提问