react开发环境搭建

写文背景

月初刚刚换了工作，也换了城市，从某强二线城市换入互联网之都，开始了全新的代码人生阶段。之前一直写 AngularJs，这边公司使用的是 React，so，一切都是新的，很兴奋，也很幸苦，加班学React，看业务代码。。。
一直也没有码文发博客的习惯，渐渐感觉博文对知识沉淀的重要性，所以开始努力挤时间去写，只为记录所学的知识、所遇到的坑，以共勉。

一、git bash中的准备

步骤1：安装脚手架

首先要在项目根目录中，通过git命令安装两个插件，命令如下：

npm install -g yarn create-react-app

步骤2：利用脚手架创建工程

然后通过脚手架工具 create-react-app 创建工程，命令如下：

create-react-app myapp

注意这里的工程名不能包含大写，否则会报错：

Could not create a project called "myApp" because of npm naming restrictions:
  *  name can no longer contain capital letters

当看到 “Happy hacking!” 字样时，就可以进入下面的步骤了。

二、VSCode中的操作

剩下的几个步骤，在VSCode集成的bash环境中进行。
进入项目目录，结构如下：

简单明了，public 存放一些静态文件，其中跟节点在 index.html 文件中，项目开发中不用关注此文件夹。src 是项目代码存放地，是我们关注的重点。package.json 记录了项目基本信息，包括依赖包、打包运行脚本等。

步骤3：继续安装依赖包

在 VSCode 中按 Ctrl + `（反引号）打开终端，通过 yarn 命令安装依赖包：

yarn add redux react-router-dom axios less less-loader antd

安装完成以后，可以通过 yarn start 启动项目来看结果：

yarn start

但是由于 AntD 是基于 less 文件开发的，而脚手架创建的项目是不识别 less 文件的，所以要针对 less 文件解析进行配置。

步骤4：暴露 webpack 配置文件

由于脚手架创建的项目中，没有直接将我们熟悉的 webpack 配置文件暴露出来，需要执行命令将其暴露出来。
先将项目关闭，再将上述步骤产生的一些修改提交一下：

git add .
git commit -m 'init'

再执行命令暴出 webpack 配置文件：

yarn eject

执行过程中会确定是否需要 eject 操作，因为它是不可逆的，直接输入 y 回车继续。结束以后，不仅 package.json 文件多了很多，还出现了 config 目录和 scripts 目录，后者无需关注；再前者中找到 webpack.config.js 文件进行下一个步骤。

步骤5：修改 webpack.config.js 文件

最新版本（4.38.0版）的 webpack 配置文件的配置有所改动，跟以前不一样，这次也是摸索以后的小结。
在 webpack.config.js 中，仿照 css 的配置方式添加如下代码：

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

// 添加如下代码块 
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
	test: cssRegex,
	exclude: cssModuleRegex,
	......
	sideEffects: true,
},
{
	test: cssModuleRegex,
	......
},

找到上面这段代码，复制、粘贴到后面，并修改相应的变量名，如下

{
	test: lessRegex,
	exclude: lessModuleRegex,
	......
	sideEffects: true,
},
{
	test: lessModuleRegex,
	......
},

步骤6：检验效果

如下图修改脚手架创建的文件：

如果没有做第5步，页面将会变成下面这样：

这就是由于没有配置 less 和 less-loader 解析模块导致的，说明原生不支持 less 文件。做完第5步修改以后，又能看到如下的欢迎界面！Happy hacking！