使用 react+antd+react-router+less

写在开头

为什么会有这篇文章？
众所周知，前端技术栈太过广泛，要一个技术人员选择一套高度可复用的前端架构也是挺费事费神的，笔者这篇文章，主要讲述的是一套基于react技术栈开发网站的成熟方案，重点解决在集成这一套技术栈过程中的坑点，从开发到上线，从依赖包到脚手架。本文将 从0到1 讲解使用react开发网站中使用到的技术栈。

1、使用create-react-app创建项目

在开始之前，你可能需要安装 yarn。

yarn create react-app antd-demo

# or

$ npx create-react-app antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

2、支持less

• 为项目创建本地git仓库

git init
git add .
git commit -m 'init'

如果不进行这一步操作，直接运行 yarn eject 会报如下错误

This git repository has untracked files or uncommitted changes:

因为在初始化项目之后，该项目并没有本地 git 仓库，而此项目目录下又有 .gitignore 文件，所以此时会向上级寻找未提交的项目。

• 安装依赖

yarn add less less-loader -D

• 暴露webpack配置

yarn eject

运行完命令，中间会有一个交互命令，直接输入：y 即可，完成后会生成config和script两个文件夹

• 配置webpack.config.js

修改config/webpack.config.js

新增less配置变量

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配置，这个其实不配置也行

增加module下面rule规则，可以copy cssRegex或者sassRegex的配置。

{
    test: sassModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "sass-loader"
    )
}, 
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,// 值是1
            // modules: true, // 增加这个可以通过模块方式来访问css, 这里之所以注释，是因为和后面的自定义主题有冲突
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader"
    ),
    sideEffects: true
}, 
{
    test: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "less-loader"
    )
},
// "file" loader makes sure those assets get served by WebpackDevServer.

至此，项目已经支持less了，可以将src下的App.css改成App.less，记得引用的地方也要改。然后修改一个样式保存试试，，执行yarn start发现已经修改成功

需要注意以下几个地方：

1.lessRegex中importLoaders的值为1

当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如const cssRegex = /\.css$/只是处理css一种类型的文件，那应该就是1；const sassRegex = /\.(scss|sass)$/;对应的是scss和sass两种类型，那就应该是2.

2.lessRegex的use中增加modules配置

modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个.title,引用时import './index.less'，使用时：<div className="title"></div>。如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from './index.less',使用<div className={styles.title}></div>。一开始笔者也是设置成了true，后面发现和antd自定义主题存在冲突，一时没搞明白，就暂且不用这种方式，也不影响。

3、安装antd、配置按需加载、自定义主题

• 安装依赖

yarn add antd babel-plugin-import

• 配置antd按需加载

antd按需加载不用每次都在引入组件的地方引入特定样式 或者 全局引入antd样式。

在package.json的babel中插入如下配置即可：

"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

• 配置antd主题

antd的默认主题往往不能满足需求，这个时候就需要自定义主题

通过上面修改package.json我们已经实现了antd组件按需加载了，不需要再额外引入组件样式了，但是如果要更改antd主题颜色的话，这里这个style属性值就不能是css了。必须改成true，原因是因为值是css时按需加载时加载的就是antd编译后之后的css文件，要更改主题颜色是要更改less变量的，而true标识直接加载antd的less文件，注意，坑来了！！当你设为true时，你会发编译失败，页面中antd组件也会没有样式了，命令行抛出如下异常：

image.png

这是因为你还没配置less-loader的配置项，在之前我复制修改的那个地方只是引入使用了less-loader，并没有添加配置项，导致他就会出现这个异常，在网上找资料大概less的版本2.7.3以前不会出现这个问题，所以我们要先给less-loader一个修改antd主题颜色的配置。

修改getStyleLoaders方法，支持传入自定义options

# 方法多接收一个newOptions参数
- const getStyleLoaders = (cssOptions, preProcessor) => {
+ const getStyleLoaders = (cssOptions, preProcessor, newOptions) => {

# 将newOptions添加到loaders中
if (preProcessor) {
    loaders.push(
        {
            loader: require.resolve('resolve-url-loader'),
            options: {
                // 开始添加
                ...newOptions,
                // 结束添加
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        },
        {
            loader: require.resolve(preProcessor),
            options: {
                // 开始添加
                ...newOptions,
                // 结束添加
                sourceMap: true,
            },
        }
    );
}

less配置中的 getStyleLoaders 添加options参数的值

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader",
        // 开始添加
        {
            javascriptEnabled: true,
            modifyVars: { "primary-color": "#ff4c4c", }
        }
        // 结束添加
    ),
    sideEffects: true
}

至此自定义主题就已经配置完毕！

4、使用react-router

react-router 是一个基于 react 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步，umi中也集成了react-router。

• 安装依赖

yarn add react-router-dom

• 使用路由

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { HashRouter, Route, Switch } from 'react-router-dom'
import * as serviceWorker from './serviceWorker';

import Home from './pages/Home';
import About from './pages/About';

ReactDOM.render(<HashRouter>
    <Switch>
        <Route exact path='/' component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
    </Switch>
</HashRouter>, document.body);

serviceWorker.unregister();

详细使用参考 react-router使用

5、项目打包给文件增加随机码，解决 微信/浏览器 缓存问题

• 打开webpack.config.js，添加如下常量

// 新增时间戳作为版本号，解决缓存（微信缓存）问题
const version = Date.now();

• 修改文件名

修改前如下：

image.png image.png

修改后如下：

image.png image.png

这个时候通过 yarn build 命令打包出来的文件，会多出一个时间戳后缀，至此缓存问题解决！

6、制作成脚手架

通过上面的操作，其实我们想当于已经搭建了一个开箱即用的、基于react+antd+less+react-router等模板的开发轮子，那么这个时候为了避免以后我们每次创建工程都要重复这些操作，这个时候可以考虑将这个搭建好的工程做成一个脚手架上传，以后每次只需要简单一个命令就可以快速创建一个同样的工程了。

脚手架作用和原理

日常工作中我们其实接触到了不少脚手架，像vue-cli、create-react-ap之类的，那么从这里我们就可以看出，脚手架其实就是一个快速构建初始工程的脚本，来帮助开发者节省开发时间，提高开发效率的工具。

开始制作脚手架

• 创建脚手架工程

// 创建脚手架目录，命令为 create-cli
mkdir create-cli
// 初始化npm模板，根据引导创建 package.json文件
npm init

• 安装依赖

commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
download-git-repo，下载并提取 git 仓库，用于下载项目模板。
Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。
ora，下载过程久的话，可以用于显示下载中的动画效果。
chalk，可以给终端的字体加上颜色。
log-symbols，可以在终端上显示出 √ 或 × 等的图标。

yarn add commander download-git-repo Inquirer handlebars ora chalk log-symbols

• 编写脚本

创建 bin 目录来存放脚本文件，编写如下脚本 .bin/index.js

#!/usr/bin/env node 
const program = require('commander');
const download = require('download-git-repo');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');

const spinner = ora('start create ...')

program.version('1.0.0', '-v, --version')
       .command('init <name>')
       .action((name) => {
          spinner.start()
          download('direct:gitbug地址', name, {clone: true}, (err) => {
              if(err){
                spinner.fail('create failed')
              }else{
                spinner.succeed('create success')
              }
          })
       });
program.parse(process.argv);

修改 package.json 文件 package.json

{
  "name": "create-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": "./bin/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• 本地测试

编写完成了脚本，我们可以先不发布到npm官网，先做一下本地测试，在工程根目录执行 npm link 即可在本地安装脚本全局映射。然后执行如下命令测试脚本是否正常运行：

create-cli init test

• 发布npm

测试完成之后，运行如下命令将命令发布到 npm 公网：

npm publish

之后团队其他人员就可以通过如下命令安装脚手架了

npm install create-cli -g

参考文章

create-react-app使用less最详细说明 2019-04-13
create-react-app 16.8最新版配置less以及antd自定义主题
react中打包时解决浏览器缓存的问题
基于node.js的脚手架工具开发经历
用Node.js简单写个脚手架