前端系列总结-框架篇（1）Create-React-App

create-react-app的介绍、安装和使用

create-react-app是React团队推出的一款用于生成react项目的脚手架工具，可以实现零配置开发react的单页面应用。

安装和使用

一般来说都是使用npm全局安装，前提条件是已经配置好node环境

// 全局安装
npm install -g create-react-app

// 回答相关问题后在当前目录下创建my-first-app项目，并安装相关依赖
create-react-app my-first-app

// 进入项目目录下 npm run start 也可以简写成 npm start，完成后浏览器会自动开启localhost:3000
cd my-first-app && npm run start 

项目的目录结构

├── package.json
├── public                  # webpack的静态资源目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src						# 源码目录
│   ├── App.css             # 根组件样式
│   ├── App.js              # 根组件代码
│   ├── App.test.js 		# 根组件测试文件
│   ├── index.css           # react的入口文件样式
│   ├── index.js            # react的入口文件，使用ReactDom渲染页面
│   ├── logo.svg			# 网站ico
│   └── serviceWorker.js
├── package.json   		    #记录项目依赖以及相关信息
└── yarn.lock

package.json下的相关脚本：

"scripts": {
   
    "start": "react-scripts start", // 启动项目
    "build": "react-scripts build",// 构建项目
    "test": "react-scripts test",// 启动测试脚本
    "eject": "react-scripts eject"// 暴露webpack及相关配置，无法恢复
  }

项目的个性化配置

在开发过程中，可能会遇到一些脚手架没有预先配置好的情况，比如接口的代理转发，动态文件的插入，以及文件路径的别名等等需求。这些都需要开发者自己执行eject脚本后自行配置。
执行eject后项目结构会发生一些变化，多出了config和script两个目录，分别存放一些通用的配置如环境变量，项目路径和项目的相关脚本。

添加项目路径别名

在编码过程中，使用到项目中的组件或其他功能函数时，一般都是采用相对路径的方式引入，即：’./‘和’…/’,这样的做法好处是，编辑器可以进行友好的提示，不好就是当路径层级较深时变得很复杂，而且项目需要改动或迁移时就会显得很麻烦。所以可以通过修改webpack的配置来改善这一情况。
首先为了方便也为了统一，先在paths下添加路径变量：

module.exports = {
   
    dotenv: resolveApp('.env'),
    appPath: resolveApp('.'),
    appBuild: resolveApp(buildPath),
    appPublic: resolveApp('public'),
    appHtml: resolveApp('public/index.html'),
    appIndexJs: resolveModule(resolveApp, 'src/index'),
    appPackageJson: resolveApp('package.json'),
    appSrc: resolveApp('src'),
    appTsConfig: resolveApp('tsconfig.json'),
    appJsConfig: resolveApp('jsconfig.json'),
    yarnLockFile: resolveApp('yarn.lock'),
    testsSetup: resolveModule(resolveApp, 'src/setupTests'),
    proxySetup: resolveApp('src/setupProxy.js'),
    appNodeModules: resolveApp('node_modules'),
    swSrc: resolveModule(resolveApp, 'src/serviceWorker'),
    publicUrlOrPath,
    // 以下为添加部分
    componentsPath: resolveApp('src/components'),
    cssPath: resolveApp('src/statics/styles/css'),
    scssPath: resolveApp('src/statics/styles/scss'