react-create-app blog-react-app
cd blog-react-app

yarn add antd

yarn add ant-design-pro@latest

# 将webpack相关配置暴露出来
yarn run eject
# 引入一个用于按需加载组件代码和样式的 babel 插件
yarn add babel-plugin-import --save-dev

...
  "babel": {
    "presets": [
      "react-app"
-    ]
+    ],
+   "plugins": [
+      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }, "antd"]
+      ["import", { "libraryName": "ant-design-pro", "libraryDirectory": "lib", "style": true, "camel2DashComponentName": false }, "ant-design-pro"]
+    ]
  }
...

yarn add react-router
yarn add react-redux
yarn add redux
yarn add redux-saga

...
  alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
    '@': paths.appSrc,    // 加入这一行 功能其实就是后面这个：path.resolve('src'),   src的相对路径或者绝对路径要配置正确
  },
...

yarn add less less-loader --dev

// webpack.js 中找到 SASS相对应的位置， 加入如下的LESS配置
lessRegex 与 lessModuleRegex 参考 SASS的写法


// Opt-in support for LESS (using .scss or .less extensions).
// By default we support LESS Modules with the
// extensions .module.less or .module.less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less or .module.less
// 此处按照描述，模块化CSS的用法在 less中必须给less文件使用 .module.less 后缀
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

# 安装
# yarn add babel-plugin-transform-decorators-legacy --dev
yarn add @babel/plugin-proposal-decorators --dev

# 配置 package.json 注意：babel 7.0以上版本配置与之前不同：如下
"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
},

yarn add axios

yarn add marked
yarn add highlight.js
# 或者使用
yarn add react-markdown

yarn add gh-pages --dev