Antd需要負荷設定、エイリアスエイリアス経路、及び従来の構成

Antd需要負荷設定、エイリアスエイリアス経路、及び従来の構成

1.負荷需要とエイリアスエイリアス

プラグインをインストールする必要性について

npm i antd react-app-rewired customize-cra babel-plugin-import less less-loader -S

コードに第二のステップをコピーし、にpackage.jsonファイルを変更します。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}

次のように修正されたコードをコピーしてください：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

第三段階のコードをコピー
：さらに参照公式サイト
antd公式サイトを

読み込み、ディレクトリファイルと設定-overrides.jsを作成します。

    const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require('customize-cra');
    const path = require('path');
    function resolve(dir) {
        return path.join(__dirname, '.', dir)
    }

    module.exports = override(
        // antd按需加载，不需要每个页面都引入"antd/dist/antd.css"了
        fixBabelImports('import', {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true  //这里一定要写true，css和less都不行
        }),
        // 配置路径别名
        addWebpackAlias({
          @: resolve("src")
        })
  )

2.デコレータの設定

• インストール

npm install @babel/plugin-proposal-decorators --save

• コンフィギュレーション

設定-overrides.jsに導入AddDecoratorsLegacy

    const { override, fixBabelImports,  addWebpackAlias ,addDecoratorsLegacy} = require('customize-cra');
    const path = require("path")
    module.exports = override(
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      }),
      addWebpackAlias({
        '@': path.join(__dirname, "src")
      }),
      addDecoratorsLegacy()//使用装饰器
    );

• 使用

import React, { Component } from 'react'
    
    const withName = (Com) => {
      class Hoc extends Component {
        constructor(props) {
          super(props);
        }
        render() {
          return (
            <Com {...this.props} name="hansu"></Com>
          )
        }
      }
      return Hoc
    }
    
    @withName
    class Comment extends Component{
      render(){
      return (
        <div>
          {this.props.name}
        </div>
      )}
    }
    
 export default Comment

3.vscodeプラグ

一般的なプラグイン

• ES7は/ Reduxの/ GraphQL /リアクト - ネイティブスニペットに反応します

RCC：通常の組立
RFC：純粋な成分
...

• 反応-ネイティブ/反応/ ReduxのスニペットES6 / ES7について

IMR：REACTの導入
CCR：導入手段を
...