React+Ant Design開発環境をセットアップするための実装手順

React+Ant Design開発環境をセットアップするための実装手順

基礎

1. スキャフォールディングを使用してプロジェクトを作成し、開始する

1.1 足場を設置する:

npm インストール -g 作成-react-app

1.2 スキャフォールディングを使用してプロジェクトを作成する:

React アプリの作成、antd の起動、デモ

antd-start-demo はプロジェクト名です。

1.3 起動

npm スタート

2. npmをyarnに変換する

2.1 yarnをインストールする:

npm インストール -g 糸

2.2 yarnの現在のイメージソースを取得します。

yarn config レジストリを取得する

2.3 Taobaoミラーとして設定する:

yarn config レジストリ 'https://registry.npm.taobao.org' を設定します

2.4 一般的なコマンド:

yarn init --initialize yarn add --add module yarn remove --remove module yarn /yarn install --install dependency in the project

プロジェクト構築

2.1 react-router 4.0、axios、less-loaderをインストールする

yarn react-router-dom axios less-loader を追加します

2.2 webpack設定の公開

糸排出

ヒント: yarn ejectを実行してエラーが発生した場合

ここに画像の説明を挿入

ファイルを変更した後、yarn eject コマンドを使用すると、上記のエラーが報告されます。これは、scaffolding を使用してプロジェクトを作成したときに、.gitignore ファイルが自動的に追加されたが、ローカル ウェアハウスがないためです。このときは、次のコマンドを実行して、プロジェクトをローカル ウェアハウスに追加してから実行します。
解決:

git を追加します。
git コミット -m 'init'
糸排出

次に、yarn eject を実行します。

ここに画像の説明を挿入

webpack の設定

2.3 less-loaderの設定

Antd は less をベースに開発されています。less を使用すると、テーマの色やその他の構成を簡単に変更できます。

lessモジュールをインストールします: yarn add [email protected]

config/webpack.config.dev.js を開き、次の構成を追加します。

{
      テスト: /\.less$/,
      使用: [
       require.resolve('スタイルローダー'),
       {
        ローダー: require.resolve('css-loader'),
        オプション: { importLoaders: 1 },
       },
       {
        // PostCSS のオプション。これらのオプションを 2 回参照します。
        // 指定したブラウザのサポートに基づいてベンダープレフィックスを追加します
        // パッケージ.json
        ローダー: require.resolve('postcss-loader'),
        オプション:
         // 外部 CSS インポートが機能するために必要
         // https://github.com/facebook/create-react-app/issues/2677
         識別子: 'postcss',
         プラグイン: () => [
          'postcss-flexbugs-fixes' が必要です。
          'postcss-preset-env' が必要です({
           自動プレフィックス: {
            フレックスボックス: 'no-2009',
           },
           ステージ: 3,
          })、
         ]、
        },
       },
       { ローダー: require.resolve('less-loader') }
      ]、
},

図に示すように同じレベルでcssloadを構成するには

ここに画像の説明を挿入

画像の例 注: webpack.config.dev.js に追加された構成部分は、webpack.config.prod.js でも構成する必要があります。そうしないと、プロジェクトがリリースされた後にエラーが発生し、プログラムを実行できなくなる可能性があります。

2.4 antdをインストールする

糸を追加 antd

2.5 テスト使用

"antd"から{Button}をインポートします。
'antd/dist/antd.css' をインポートします。

...
 与える() {
  戻る (
   <div>
     <Button>クリック</Button>
   </div>
  );
 }
...

注: デフォルトでは、インストールされた antd はスタイルを有効にするために antd/dist/antd.css をインポートする必要があります。ただし、多くの場合、一部のコンポーネントのみを使用し、antd スタイル ファイル全体をインポートするため、損失する価値はありません。そこでオンデマンドローディングが誕生しました。

2.6 antd オンデマンド読み込み
1. babel-plugin-importを追加します。

yarn に babel-plugin-import を追加

2. webpack設定を開いて検索: JS with Babel

次の構成を見つけます。

// Babel を使用してアプリケーション JS を処理します。
     // プリセットには、JSX、Flow、TypeScript、およびいくつかの ESnext 機能が含まれています。
     {
      テスト: /\.(js|mjs|jsx|ts|tsx)$/,
      インクルード: paths.appSrc、

      ローダー: require.resolve('babel-loader'),
      オプション:
       カスタマイズ: require.resolve(
        'babel-preset-react-app/webpack-overrides'
       )、
       
       プラグイン: [
        [
         require.resolve('babel-plugin-named-asset-import'),
         {
          ローダーマップ: {
           svg: {
            Reactコンポーネント: '@svgr/webpack?-prettier,-svgo![パス]',
           },
          },
         },
        ]、
       ]、
       キャッシュディレクトリ: true、
       // 時間がそれほど重要でない場合はディスク容量を節約する
       キャッシュ圧縮: true、
       コンパクト: true、
      },
     },

プラグインを変更して以下を追加します:

["import", { "libraryName": "antd", "style": true }]

この時点で、CSS ファイルの導入をキャンセルできます。Babel は、導入されたコンポーネントに基づいて、デフォルトで対応する CSS を自動的にロードします。

2.7 テーマカラーを変更する

 {
        ローダー: require.resolve('less-loader'),
        オプション:
         モジュール: false、
         変数の変更: {
          "@プライマリカラー": "#f9c700"
         }
        }
       }

webpack の less の設定で変更できます。 @primary-color は antd に組み込まれた less 変数です。テーマの色を変更するには、デフォルトの設定を上書きするだけです。

注: yarn run start を実行するとエラーが報告されます ValidationError: 無効なオプション オブジェクト。Less Loader はオプション オブジェクトを使用して初期化されています

解決策: less-loader をアンインストールし、[email protected] をインストールします。

糸を取り除く 少ないローダー
yarn [email protected] を追加します

React+Ant Design開発環境の構築手順については以上です。React Ant Design構築に関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Ant ツリーテーブルの複雑な追加、削除、変更操作を設計する
  • React ant Designはフォームの値を手動で設定します
  • React+antデザインはテーブルの追加、削除、変更のためのサンプルコードを実装します
  • React プロジェクトで AntDesign を使用する方法

<<:  Docker の詳細なイラスト

>>:  Linux オペレーティング システムでよく使用される MySQL コマンドの概要

推薦する

VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について

背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...

MySQL の無効な左結合の問題を解決する方法とその使用上の注意

MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...

ウェブアニメーションのフレームレートFPSを計算する方法

目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

Windows での Nginx のインストールと環境設定 (nginx をサービスとして実行)

最初で最も重要なステップは、Windows 環境に Ngnix サービスをインストールする方法です。...

単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある

CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...

docker で golang イメージに基づいて ssh サービスを構築する方法

以下は、docker の golang イメージに基づいて ssh サービスを構築するためのコードで...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

VirtualBox で作成された Debian 仮想マシンは Windows ホストとファイルを共有します

用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...

Vue3は画像拡大鏡効果を実現します

この記事の例では、画像拡大鏡効果を実現するためのVue3の具体的なコードを参考までに共有しています。...

CSSの複数条件の書き方の詳細説明:

:not疑似クラスセレクターは、式に一致しない要素をフィルタリングできます。例 テーブル tbod...

HTML ウェブページの段落レイアウトと改行

Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

新しいウィンドウで開くジャンプメニュー、window.open の使い方の紹介

コードをコピーコードは次のとおりです。 <前> <div> <sele...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...