React

【React】React全家桶（一）

React+Antd+Router+Axios+Redux+Saga+Less

Posted by ARTROY on 2019-09-19

版本

1
2
React: 16.9.0
Antd: 3.23.3

安装React

1
2
3
npx create-react-app [项目名]
cd [项目名]
npm run eject   // package.json 会有变化

安装Antd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
npm install antd --save

// 按需加载  使用 babel-plugin-import（推荐）
npm install babel-plugin-import --save-dev


// .babelrc（.babelrc文件） or babel-loader（package.json）== 此处
 "babel": {
    "presets": [
      "react-app"
    ],
    // 添加此内容
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "true"    // `style: true` 会加载 less 文件 还需下载 less 与less-loader并配置
        }
      ]
    ]
  },

安装Less

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
less less-loader

/**
 *  antd 配置 less 
 * （webpack.config.js）
 */

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

// 添加处 1
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

...
// 添加处 2
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},
...

// 修改处 3
// 修改前
// if (preProcessor) {
//   loaders.push(
//     {
//       loader: require.resolve('resolve-url-loader'),
//       options: {
//         sourceMap: isEnvProduction && shouldUseSourceMap,
//       },
//     },
//     {
//       loader: require.resolve(preProcessor),
//       options: {
//         sourceMap: true,
//       },
//     }
//   );
// }

// 修改后
if (preProcessor) {
  let loader = require.resolve(preProcessor)
  if (preProcessor === "less-loader") {
    loader = {
      loader,
      options: {
        modifyVars: {    // 自定义主题
          'primary-color':' #1890ff ',
        },
        javascriptEnabled: true,
      }
    }
  }
  loaders.push(loader);
}

安装React-Router-Dom

1
npm install --save react-router-dom

安装Axios

1
npm install axios

安装Redux+Redux-Saga

1
npm install --save redux redux-saga

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
React
参与社区
-->