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をよろしくお願いいたします。

以下もご興味があるかもしれません: