搭建react空项目

前言

date:2020-12-25

本身不是做前端的，但是偶尔也会自己做个小项目，相比vue更喜欢react。但是前端跟后端的用法差距有些大（可能是前端不够熟练吧），每次新建一个前端项目都要捣鼓好久。所以索性就记录一下步骤并搭建一个空项目。以后用的时候直接去github上拉就行了。

项目地址：react_template‘

在GitHub上上传了一个空项目。

除了必要的脚手架以外还添加了如下依赖：

• antd，各种定义好的组件
• axios， 处理异步请求
• react-router-dom，处理前端路由
• redux、react-redux、redux-saga处理状态
• react-app-rewired customize-cra babel-plugin-import，antd按需打包

下面讲述一下这个空项目是如何完成的：

步骤

下载依赖

 npm install antd --save
 npm install redux --save
 npm install --save redux-saga
 npm install --save react-redux
 npm install --save react-router-dom
 npm install axios 
# 下面是按需打包插件
npm install react-app-rewired customize-cra babel-plugin-import

按需打包

上面代码块中最后一行是下载的按需打包的依赖，除了依赖还需要一些必要的设置

1. 配置config-overrides.js文件,该文件要放到项目根目录下.根目录是项目根目录，不是src下面

/**
 * antd中有很多组件，我们不可能全部都使用，但是我们现在都引入了，在打包的时候应该按需进行打包，不能所有的都打包
 */
const {override, fixBabelImports} = require('customize-cra')

module.exports = override(
    //针对antd实现按需打包，只会打包import中出现的组件
    fixBabelImports('import',{
        libraryName: 'antd', //针对antd库
        libraryDirectory: 'es', //使用
        style: 'css' //自动打包相关的样式
    })
)

2. 替换package.json中的内容

//在	package.json中默认的启动编译脚本如下，也就是使用react-scripts进行启动、编译等命令
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
//现在修改为下面的方式
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
//其实可以看到，只是换了启动脚本。react-app-rewired对react-scripts进行了简单的封装，并加在了上面写的config-overrides.js文件

重置默认样式

1. 在public/css目录下新建文件reset.css。

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    overflow-y:hidden; /* 加margin以后，页面会出现滚动条，加这句就不会了 */
    overflow-x: hidden; /* 加margin以后，页面会出现滚动条，加这句就不会了 */
}

#root {
    width: 100%;
    height: 100%;
}

2. 在index.html中引用此样式

<link rel="stylesheet" type="text/css" href="/css/reset.css">

配置支持less并设置可以支持antd自定义主题

配置less文件

react模式是不支持less样式文件的，需要进行配置。网上大多都是说使用eject命令将webpack.config.js文件暴露出来的。但是我试了很多次都不生效。所以放弃了。（如果以后感兴趣可以百度搜：react less不生效就能搜到百度的方法）

这里介绍antd官网的一种方式。官网教程传送门。

项目根目录下安装依赖：

 npm install @craco/craco
 npm install craco-less 

Package.json文件更改scripts中的内容

//更改前
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 //更改后
 "scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
 }

根目录创建文件craco.config.js并添加如下内容

const CracoLessPlugin = require('craco-less');
 ​
   module.exports = {
       plugins: [
           {
               plugin: CracoLessPlugin,
               options: {
                   lessLoaderOptions: {
                       lessOptions: {
                           modifyVars: { '@primary-color': '#1DA57A' },
                           javascriptEnabled: true,
                       },
                   },
               },
           },
       ],
   };

将App.css改为App.less并在文件头部加入下面一行

 @import '~antd/dist/antd.less';

以上就完成了使该项目支持less样式表文件，并可以支持自定义主题。

（本节2020-01-16更新）

*尚未解决的问题

1. 跨域问题。目前没有对跨域进行配置，如果要与后端对接接口需要自行配置。

 

以上配置改天有时间会添加上的。