1、react脚手架环境搭建 Create React App
1.1 全局安装脚手架
// 全局安装脚手架
sudo npm install -g create-react-app (mac) //把模块安装在全局环境下（目的：可以使用命令），mac电脑安装的时候需要加sudo ,否则没有权限
npm install -g create-react-app (window)
1.2 脚手架创建项目
create-react-app [项目名称] //基于脚手架命令，创建出一个基于react的自动化/工程化项目目录，和npm发包的时候命名规范一样，项目名称中不能以下：大写字母，中文汉字，特殊符号（-或者_是可以的）等
创建项目后的目录如下:
node_modules // 当前项目所需要的依赖包
public // 存放的是当前项目的HTML页面
src // 项目结构中最主要的目录
index.js // 项目的入口文件
package.json // 当前项目的配置清单
README.md // 项目说明
yarn.lock // 由Yarn管理您的yarn.lock文件是自动生成的，也完全Yarn来处理。顶级yarn.lock文件包含Yarn需要锁定整个依赖关系树中所有包的版本的所有内容。
1.3 package.json中内容的解析
{
"name": "react-blog", // 项目名称
"version": "0.1.0", // 版本号
"private": true, // 是否是私有项目
"dependencies": { //生产依赖 基于脚手架生成工程目录，自动帮我们安装了三个模块
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0" // 集成了webpack等环境有如下:
-> babel 一套
-> css处理一套
-> eslint 一套
-> webpack一套
-> 其他的
-> 没有less/sass的处理内容（项目中使用less,我们需要自己额外的安装)
},
"scripts": { // npm快捷执行命令脚本配置 可以执行 npm run start / yarn start
"start": "react-scripts start", //开发环境下，基于webpack编译处理，最后可以预览当前开发的项目成果（在webpack当中安装了dev-server插件，基于这个插件会自动创建一个web服务【端口号默认是3000】，webpack会帮我们自动打开浏览器，并且展示我们的页面，并且能够监听我们代码的改变，如果代码变了，webpack会自动重新编译，并且刷新浏览器来完成重新渲染
"build": "react-scripts build", //项目需要部署到服务器上，我们先执行yarn build，把项目整体编译打包（完成后会在项目中生成一个build文件夹，这个文件夹中包含了所有编译后的北荣，我们把它上传到服务器即可），而且在服务器上进行并部署的时候不需要安装任何模块，因为webpack已经把需要的内容都打包到一个js中了
"test": "react-scripts test", //test用于单元测试
"eject": "react-scripts eject" //我们有时候要自己配置webpack,这个是时候我们需要yarn eject命令暴露项目的配置，可以自由配置项目所需的依赖，不使用的版本零配置即可开发。
},
"eslintConfig": { //eslint配置
"extends": "react-app"
},
"browserslist": { // 项目浏览器兼容配置
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
1.4 深入剖析react脚手架
create-react-app脚手架为了让结构目录清晰，把安装的webpack及配置文件都集成在了react-scripts模块中，放到了node-modules中
但是真实项目中，我们需要在脚手架默认安装的基础上，额外安装一些我们需要的模块，例如：react-router-dom/axios... 在比如：less/less-loader...
情况一：如果我们安装其他的组件，但是安装成功后不需要改变webpack的配置项，此时我们直接的安装，并且调取使用即可
情况二：我们安装的插件是基于webpack处理的，也就是需要把安装的模块配置到webpack中（重新修改webpack配置项了）
// 1.首先需要把隐藏到node-modules中的配置项暴露到项目中
yarn eject / npm run eject
// 首先会提示确认是否执行eject操作，这个操作是不可逆的，一旦暴露出来配置项，就无法隐藏回去了
// 如果成功了,出现如下:
// 这个时候你会发现项目中多了两个文件夹目录下都是与项目相关的webpack配置
config文件夹
scripts文件夹
package.json也发生了变化
1.5配置less
// 1.安装less和less-loader
npm install less less-loader --save-dev
// 2.在项目中找到`config`文件夹下的`webpack.config.js`文件下的如下代码
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 在下面补充
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
