根据项目需求，需要使用到react框架来开发新的项目，初次使用react搭建项目，没有选用create-react-app直接生成的目录结构，但是我觉得定制化不够，网上查询了不少项目构建的方式，没有找到满意的结果，于是乎决定从react-script内部结构及配置中筛选出项目中能用上的部分，然后再根据当前项目需求修改部分配置。

开始搭建项目：
安装：
1、全局安装typescript:

npm install -g typescript

2、新建项目文件夹并进入：

mkdir react-demo && cd react-demo

3、初始化，生成package.json、tsconfig.json和.eslintrc.json:（ps.当前使用的是eslint）

npm init -y && tsc --init
npx eslint --init

4、安装开发工具webpack, webpack-cli, webpack-dev-server：（ps.注意版本问题，如果不兼容就安装react-script指定版本）

npm install -D webpack@4.44.2 webpack-cli@3.3.0 webpack-dev-server

5、安装react相关：

npm install -S react react-dom
npm install -D @types/react @types/react-dom

项目结构及基础配置：
1、新建src、public、config、environment文件夹：

mkdir src public config environment

1.1、进入public文件夹新建index.html及放入favicon.ico：

1.2、进入config文件夹新建webpack.config.js、paths.js、env.js、devServer.js、plugins.js；
1.3、进入environment文件夹新建.env.development、.env.production、.env.test：
1.4、进入src文件夹新建index.tsx、assets、component、route、service、tools、view：

2、配置tsconfig.json、.eslintrc.json及编辑package.json：
2.1、配置tsconfig.json：

{
  "compilerOptions": {
  /*基本选项*/
  "target": "es5" /* 指定ECMAScript目标版本：``ES3''（默认），``ES5''，``ES2015''，``ES2016''， 
   ``ES2017''，``ES2018''，``ES2019''，``ES2020''或``ESNEXT''。 */,
  "module": "ESNext" /* 指定模块代码生成：“ none”，“ commonjs”，“ amd”，“ system”，“ umd”，“ es2015”，“ 
  es2020”或“ ESNext”。 */,
  "lib": ["dom", "dom.iterable", "esnext"] /* 指定要包含在编译中的库文件。 */,
  "allowJs": true /* 允许编译javascript文件。 */,
  "jsx": "react" /* 指定JSX代码生成：“ preserve”，“ react-native”或“ react”。 */,
  "noEmit": true /* 不要发射输出。 */,
  "isolatedModules": true /* 将每个文件作为单独的模块进行翻译（类似于“ ts.transpileModule”）。 */,

   /* 严格的类型检查选项 */
  "strict": true /* 启用所有严格的类型检查选项。 */,

   /* 模块分辨率选项 */
   "moduleResolution": "node" /* 指定模块解析策略：“节点”（Node.js）或“经典”（TypeScript 1.6之前的版本）。 
   */,
  "allowSyntheticDefaultImports": true /* 允许从模块进行默认导入而没有默认导出。 这不影响代码发出，仅影响类 
   型检查。 */,
  "resolveJsonModule": true /* 是否允许把json文件当做模块进行解析 */,
  "esModuleInterop": true /* 通过为所有导入创建名称空间对象，启用CommonJS和ES模块之间的发射互操作性。 暗示“ 
   allowSyntheticDefaultImports”。 */,

  /*高级选项*/
  "skipLibCheck": true /* 跳过声明文件的类型检查。 */,
  "forceConsistentCasingInFileNames": true /* 禁止对同一文件使用大小写不一致的引用。 */
 }
}

2.2、配置.eslintrc.json

{
"env": {
    "browser": true,
    "es2021": true
},
"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
    // 自定义的规则
    "linebreak-style": [0, "error", "windows"],
    "react/jsx-filename-extension": 0,
    "indent": ["error", 2], // error类型，缩进4个空格
    "space-before-function-paren": 0, // 在函数左括号的前面是否有空格
    "eol-last": 0, // 不检测新文件末尾是否有空行
    "semi": ["error", "always"], // 必须在语句后面加分号
    "quotes": ["error", "single"], // 字符串没有使用单引号
    "no-console": ["error", { "allow": ["log", "warn"] }], // 允许使用console.log()
    "arrow-parens": 0,
    "no-new": 0, //允许使用 new 关键字
    "no-duplicate-imports": "off"
 }
}

2.3、编辑package.json、.env.development、.env.production、.env.test：

package.json:
 "scripts": {
  "dev": "set ENV_PATH=development&& webpack-dev-server --config config/webpack.config.js --open",
  "build": "set ENV_PATH=production&& webpack --config config/webpack.config.js --profile",
  "test": "set ENV_PATH=test&& webpack --config config/webpack.config.js --profile"
 },
 "browserslist": {
 "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
  ],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
  ]
 },

.env.development：
  NODE_ENV=development

.env.production：
  NODE_ENV=production

.env.test：
  NODE_ENV=production