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

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

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

npm スタート

npm インストール -g 糸

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

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

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

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

糸排出

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

{
      テスト: /\.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') }
      ]、
},

糸を追加 antd

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

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

yarn に babel-plugin-import を追加

// 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 }]

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

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