React开发框架搭建

发表于 | 更新于 | 分类于 ， ， | 阅读次数：
自学react开发框架搭建

一. 介绍

  1. ^:在此为工程目录

二. 创建初始化项目

1
careta-react-app kuangjia

三. 安装其他第三方模块

1
yarn add axios antd less less-loader react-redux react-router-dom babel-plugin-import

四. 配置less-loader

  1. 导数webpack配置

    1
    yarn eject

  2. ^/config/webpack.config.js 中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    // style files regexes
    const cssRegex = /\.css$/;
    const cssModuleRegex = /\.module\.css$/;
    const sassRegex = /\.(scss|sass)$/;
    const sassModuleRegex = /\.module\.(scss|sass)$/;
    + const lessRegex = /\.(less|less)$/;
    + const lessModuleRegex = /\.module\.(less|less)$/;



    {
        test: sassModuleRegex,
        use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
            getLocalIdent: getCSSModuleLocalIdent,
            },
        },
        'sass-loader'
        ),
    },
    + {
    +     test: lessRegex,
    +     exclude: lessModuleRegex,
    +     use: getStyleLoaders(
    +         {
    +         importLoaders: 2,
    +         sourceMap: isEnvProduction && shouldUseSourceMap,
    +         },
    +         'less-loader'
    +         ),
    +     sideEffects: true,
    + },
    + {
    +     test: lessModuleRegex,
    +     use: getStyleLoaders(
    +         {
    +         importLoaders: 2,
    +         sourceMap: isEnvProduction && shouldUseSourceMap,
    +         modules: true,
    +         getLocalIdent: getCSSModuleLocalIdent,
    +         },
    +         'less-loader'
    +     ),
    + },

五. 配置antd主题 并添加按需引入(按需引入的插件在第三步已经安装了)

  1. ^/package.json中 (按需引入)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
      "babel": {
        "presets": [
        "react-app"
        ],
        "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
            "legacy": true
            }
        ],
        [
            "@babel/plugin-proposal-class-properties",
            {
            "loose": true
            }
        ],
        [
            "import",
            {
            "libraryName": "antd",
            "libraryDirectory": "es",
            "style": true
            }
        ]
        ]
    }

  2. ^/config/webpack.config.js 中(定制主题色)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
      if (preProcessor) {
        loaders.push(
          {
            loader: require.resolve('resolve-url-loader'),
            options: {
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              sourceMap: true,
            },
          }
        );
        + let loader = {
        +   loader: require.resolve(preProcessor),
        +   options: {
        +     sourceMap: isEnvProduction && shouldUseSourceMap,
        +   }
        + }
        + if (preProcessor === "less-loader") {    
        +   loader.options.modifyVars = {
        +     '@primary-color': '#f9c700',
        +     '@link-color': '#1DA57A',
        +     '@border-radius-base': '2px'
        +   }
        +   loader.options.javascriptEnabled = true
        + }   
        +   loaders.push(loader);
      }
      return loaders;
    };

六. 页面结构定义