使用最新版本 create-react-app 创建 react+antd 项目采坑记录

步骤

step 1 安装脚手架

检查 create-react-app 是否存在 如果不存在 那么直接下载最新版本 如果存在就升级到最新版本

// 检查脚手架版本号 (查看是否存在)
create-react-app -v
// 如果不存在 出现版本号 那么直接执行 以下指令
 npm install create-react-app -g 
 // 如果存在 那么 执行以下指令 获取该脚手架的版本信息 对比下是否是最新版本 
 npm info create-react-app
 // 对比版本之后 如果不是最新版本 那么就升级到最新版本 (latest 也可以输入自己指定到最新版本号)
 npm install create-react-app@latest -g

step 2 构建react项目

使用脚手架构建react项目 然后检查react项目能够在当前环境下能够跑通 之后将构建配置文件暴露出来

// 在既定目录下输入构建指令  xxx为项目名称 (其他构建指令请参考其他文献)
npx create-react-app xxxx
// 构建成功之后 输入以下脚本 确认项目在当前环境下可以运行
npm start
// 然后结束运行 执行以下指令 将构建配置文件暴露出来
npm run eject

step 3 安装react路由

安装和使用react路由

// 输入以下指令安装react路由
npm install react-router-dom -S

// 之后按需导入路由组件 笔者这里是使用hash路由 (以下为笔者使用案例)
// 首先,导入路由react 模块 和react-router-dom模块模块的相关组件 以及路由配置所依赖的类 构成路由配置文件
import { HashRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom";
import React from "react";
import ThemePage from "./pages/theme-page";
import DocsPage from "./pages/docs-page";
export default () => {
    return (<Router>
        <React.Fragment>
            <Switch>
                <Route path="/theme" component={ThemePage} />
                <Route path="/docs" component={DocsPage} />
                <Redirect from="/" to="/docs/template-lib"></Redirect>
            </Switch>
        </React.Fragment>
    </Router>)
}

// 然后在脚手架默认生成 App.js 文件里面导入这个路由配置
import React from 'react';
import logo from './logo.svg';
import './App.css';
import PageRouter from './router';

function App() {
  return (
    <div className="App">
        <PageRouter/>
    </div>
  );
}
export default App;

step 4 安装antd模块

安装antd模块

// 输入以下指令安装antd模块
npm install antd -S

step 5 按需导入antd样式

// 安装完成之后,将antd样式按需导入, 按需导入需要安装 babel-plugin-import 插件 (为 antd 官方推荐的按需导入插件)
npm install babel-plugin-import -D
//安装完成之后,我们有两种选择 一种是导入css样式文件 另外一种是导入 less 样式文件
// 在 ./config/webpack.config.js 文件中找到这一段配置代码
             {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                  //请选择其中配置之一,请勿重复配置
                  //按需导入 css 样式
                  /* ["import", {
                    "libraryName": "antd",
                    "style": true,
                  }], */
                  //按需导入 less 样式
                 /* ["import", {
                    "libraryName": "antd",
                    "style": true,
                  }],*/
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },

step 6 less相关配置

采坑,react 是默认不支持less的,所以,如果是导入antd 的 less 样式 的话 我们还要额外的配置解析less , 步骤如下:

// 安装less less-loader 
// (个人推荐less@2.7.2版本,如果最新版本支持解析 antd 的 less 那么就选择最新版本.)
npm install less@2.7.2 less-loader -S
// 配置在webpack.config.js 文件中配置 (有样学样,傻瓜式配置)

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// (模仿css 和 sass 的声明方式) 声明 正则检测less文件校验
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/

// (模仿sass 的加载解析规则配置方式) 配置less解析规则
            {
              test: lessRegex,   //modify point 1
              exclude: lessModuleRegex,  // modify point 2
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader' //modify point 3
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,  //modify point 4
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'  //modify point 5
              ),
            },

总结

• 以上采坑记录,只是为了让大家更快的上手新的 create-react-app 应用,更多细节可以参照create-react-app官方文档,antd官方文档或者在下方给笔者评论留言.
• 喜欢笔者的文章的小伙伴,可以给笔者点赞关注,支持笔者☆⌒(*＾-゜)v THX!!.