React + Typescript，使用react-boilerplate-cra-template创建react项目

React + Typescript！使用react-boilerplate-cra-template创建react项目

Create react app use react-boilerplate-cra-template.

1. 使用 cra-template-rb 模板，配合 create-react-app 命令

npx create-react-app --template cra-template-rb your-app-name

如果有已经存在的git项目，可以先将空的git项目clone到本地，然后将上面命令最后指定的your-app-name更换为本地仓库的目录。例如：

npx create-react-app --template cra-template-rb git-repo

2. 默认有一些示例页面，使用 npm run cleanAndSetup 可以清理。

3. 配置项目启动的端口

项目通过命令 npm start 或 yarn start 来启动，启动端口默认为 3000。可以通过修改项目根目录下的 .env.local 来设置启动的端口。

# .env.local
BROWSER=none
EXTEND_ESLINT=true
PORT=3030

4. 配置代理(Proxy)

为了便于代理的更改，将代理提取为json文件。然后使用 setupProxy.js 配置。

安装依赖 yarn add chalk http-proxy-middleware 或 npm i chalk http-proxy-middleware 可加 -D ，不加也行，create-react-app会处理的。

文件位置: /src/setupProxy.js (脚手架暂不支持proxy为ts文件)

/**
 * Configure Http Proxy
 */
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const {
    createProxyMiddleware } = require('http-proxy-middleware');

const divider = chalk.gray('\n-----------------------------------');

// logger
const logger = {
   
  error: err => {
   
    console.error(chalk.red(err));
  },
  proxyReversed: (target, apis) => {
   
    console.log(
      `
        Proxy to ${
     chalk.bold(target)} ${
     chalk.green('✓'