Ant Design Pro V 2をV 4ノットにアップグレード

8220 ワード
先端 ANt-design javascript
前言
先日、長い歴史を持つプロジェクト(shan)を引き継いだことがあります.技術スタックの複雑さ(混乱)に涙を流しました.1つのプロジェクトでフロントエンドの3つのフレームワーク(Angular 1,Vue,React)を使用することもできます.
3つのコードは、もっと楽しいはずだったのに、どうしてこんなことになったのだろうか.
新しい需要を受けたことを考慮して、私はまたAnt Design Pro V4の家族のバケツ(4番目の楽しみ)を導入しました.HooksとAnt Design V4の組み合わせは、確かに香りがよく、特にFormフォームの書き換えは、開発効率を大幅に向上させた.そこで暇な時間に、私は自分が担当しているAnt Design Pro V2プロジェクトをV4バージョンにアップグレードすることにしました.
ここにアップグレードプロセスを記録します.
UMI 3のアップグレード
私が当時使っていたのはant-design-pro 2.2.0足場で生成されたフロントエンドプロジェクト(JS版、非TS版)で、使っていたのはumi@2とantd@3でした.そのため、まずUMIを最新のV3バージョンにアップグレードします.
公式文書を参照:
  • 『クイックアップグレード先umi@3》
  • 『antd proプロジェクトのアップグレードからumi@3》

    • a.package.jsonのdvaとumi-pluginの先頭のカードを削除し、"umi": "^3.0.0"と"@umijs/preset-react": "^1.2.2"に変更する@umijs/preset-reactには、以前のumi-pluginプラグインが含まれています.
    {
  "dependencies": {
-   "dva": "^2.6.0-beta.16",
  },
  "devDependencies": {
-   "umi": "^2.13.0",
-   "umi-types": "^0.5.9"
-   "umi-plugin-react": "^1.14.10",
-   "umi-plugin-ga": "^1.1.3",
-   "umi-plugin-pro": "^1.0.2",
-   "umi-plugin-antd-icon-config": "^1.0.2",
-   "umi-plugin-antd-theme": "^1.0.1",
-   "umi-plugin-pro-block": "^1.3.2",
+   "umi": "^3.0.0",
+   "@umijs/preset-react": "^1.2.2"
  }
}
    npm install再インストールの実行
    実践中の発見:antd@3から最新版:npm i [email protected]への更新が必要
    再インストールnpm i redux react-reduxb.config/config.jsプロファイルの修正
    オブジェクトを直接エクスポートするには、次の手順に従います.
    export default {

}

    次のように変更します.
    import { defineConfig } from 'umi';

export default defineConfig({

})

    廃棄された属性の削除:pluginsおよびdisableRedirectHoistdevtoolの構成を削除し、デフォルトの構成を使用すればよい
    大きく次のように変更します.
    import { defineConfig, utils } from 'umi';

const { winPath } = utils;

export default defineConfig({
  //    package.json      umi   ，      
  // plugins: [],
  antd: {},
  dva: {
    hmr: true,
  },
  locale: {
    default: 'zh-CN',
    baseNavigator: true,
  },
  dynamicImport: {
    //    level, webpackChunkName   
    // loadingComponent: './components/PageLoading/index'
    loading: '@/components/PageLoading/index',
  },
  //     
  pwa: false,
  lessLoader: { javascriptEnabled: true },
  cssLoader: {
    //     modules      getLocalIdent
    modules: {
      getLocalIdent: (context, localIdentName, localName) => {
        if (
          context.resourcePath.includes('node_modules') ||
          context.resourcePath.includes('ant.design.pro.less') ||
          context.resourcePath.includes('global.less')
        ) {
          return localName;
        }
        const match = context.resourcePath.match(/src(.*)/);
        if (match && match[1]) {
          const antdProPath = match[1].replace('.less', '');
          const arr = winPath(antdProPath)
            .split('/')
            .map(a => a.replace(/([A-Z])/g, '-$1'))
            .map(a => a.toLowerCase());
          return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
        }
        return localName;
      },
    }
  }
})

    c.モジュール導入方式の変更
    //       
- import Link from 'umi/link';
- import { connect } from 'dva';
- import { getLocale, setLocale, formatMessage } from 'umi-plugin-react/locale';
+ import {
+   Link,
+   connect,
+   getLocale,
+   setLocale,
+   formatMessage,
+ } from 'umi';


//         
- import { router } from 'umi';
+ import { history } from 'umi';
- router.push()
+ history.push()

    d.ルーティング構成の変更umi2において、権限ルーティングは、Routesの属性を構成することである.umi3では、wrappers属性に変更されます.
    修正config/router.config.js
    export default [
  // app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    wrappers: ['../pages/Authorized'], // Routes     wrappers
    routes: [],
  },
];

    e.プロジェクトの再起動npm run start理論上、プロジェクトはumi3によって開始されるはずだ.
    まだエラーが発生している場合は、エラーの原因に基づいてコードを変更すればいいです.
    Ant Design Pro内蔵コンポーネントのアップグレードAnt Design Pro v2足場が提供するLayout組立体は、別個のnpmパケット@ant-design/pro-layoutに引き抜かれた.同時に、公式にはいくつかの一般的なコンポーネントがパッケージされており、業務開発を迅速に行うことができます.詳細はProComponents公式サイトを参照してください.
    しかし、私の元のプロジェクトのLayoutコンポーネントの機能は一時的に十分で、コードの変更が大きいことを考慮して、しばらくこのコンポーネントをアップグレードしていません.
    Ant Design 4のアップグレード
    公式文書参照:『v 3からv 4まで』
    a.antdが3.xの最新バージョンにアップグレードされ(umi3をアップグレードするプロセスでantdがアップグレードされた前に)、コンソールwarning情報に従って関連するAPIを削除/変更する
    b.アップグレード項目React 16.12.0以上npm i react@^16.12.0プロジェクトを再実行し、正しく実行できるかどうかを確認します.
    c.コマンド・ライン・ツールによる迅速なアップグレードantd4は大量のコンポーネントを再構成しているため、antd2で廃棄されたコンポーネント(例えば、旧バージョンのForm)と互換性を持つために、@ant-design/compatibleというnpmパッケージが公式に提供されている.
    import { Form, Mention } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

    公式にはcliツールが提供されており、コードの導入方法を自動的に変換することができます.cliを実行する前に、ローカルコードの変更をコミットしてください.
    #      
cd myproject
#    npx     
# src           
npx -p @ant-design/codemod-v4 antd4-codemod src

    自動的に変更できない部分については、codemodがコマンドラインでプロンプトを表示し、プロンプトに従って手動で変更することを推奨します.修正後、上記コマンドを繰り返し実行してチェックできます.
    d.アップグレードantdバージョンnpm i antd@^4.0.0 @ant-design/icons@^4.0.0 @ant-design/compatible@^1.0.0
    インストールに成功したら、プロジェクトを再起動し、ページ効果を表示します.
    アップグレード後の問題
    a.スタイルの問題
    アップグレード後の履歴コード、Formコンポーネントは@ant-design/compatibleを参照し、classクラス名はant-formからant-legacy-formに変更されました.このセクションのスタイルをプロジェクトで変更した場合は、クラス名を手動で変更する必要があります.
    スタイルの問題は自分のページごとに調べるしかありません.の
    b.API問題
    //
    C++structとclassの違い
    vueでのslotスロットの使用