【react学习笔记】项目配置(typeScript)

 
 

使用cra创建项目

在项目中使用ts
npx create-react-app 项目名 --template typescript
为什么使用cra呢？因为它会自动安装并配置ts相关的包，以及jest测试包等常用的包，以及一些常用的webpack配置，比如热重载、优化后的打包配置等，还直接配置好了对es6+的各自新特性的支持。而且，如果将来cra增加了新功能，我们可以只修改package.json中react-scripts的版本号，然后运行npm i或者yarn i来更新react-scripts，之后我们就可以直接在项目里使用新版本的功能了！
更多细节可以阅读CreateReactApp中文文档，如果你使用cra创建项目，那这就是必读的。

 

配置路径别名

我希望可以像使用vue那样，通过@/component直接访问到src/component，而不是在某个层级比较深的文件内写一堆../../../src/component。
 

路径代码提示

这步操作是为了让编辑器可以在我们输入@的时候能识别它并且可以给出代码提示。
首先在项目根目录下创建一个名为tsconfig.path.json的文件，然后复制下列内容：

{
   
    "compilerOptions": {
   
        "baseUrl": "src",
        "paths": {
   
            "@/*": [
                "*"
            ],
        }
    }
}

之后，在根目录下的tsconfig.json文件中新增一行配置信息，目的是将tsconfig.path.json文件内的配置合并进来。

{
   
  "extends": "./tsconfig.path.json",
  "compilerOptions": {
   ...略},
  "include": [...略]
}

为什么不直接将路径配置写在tsconfig.json中呢？因为我的项目是使用cra创建的，每次运行项目的时候tsconfig.json内的paths字段都会被移除掉，于是只好使用extend字段继承额外的配置文件。两个文件里面的配置加载顺序是这样的：在原文件里的配置先被加载，然后被来至继承文件里的配置重写。 如果发现循环引用，则会报错。
 

webpack识别别名

现在编辑器做静态分析的过程中可以识别别名了，我们输入@可以给出提示了。但是webpack在打包的时候仍然不认识这个别名，不信你可以试试运行项目，看看报错信息。我们还需要对webpack做一些配置。不过cra创建的项目默认是没有webpack.config等配置文件的，需要在控制台执行yarn run eject来将CRA 中的配置全部反编译到当前项目中，但如果我们使用了eject命令，就再也享受不到CRA 升级带来的好处了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。
基于上面的原因，我选择使用react-app-rewired来重写部分webpack配置，这样可以做到不弹出webpack配置的前提下，重写webpack配置。
首先命令行执行npm install react-app-rewired --save-dev或者yarn add react-app-rewired --dev来安装这个包，之后在项目根目录下创建名为config-overrides.js的文件，文件内容一会儿再说，最后修改package.json的scripts字段，修改后如下：

"scripts": {
   
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

接下来就可以编写config-overrides.js文件了，不过我们其实没必要编写原生的webpack配置，我选择借助customize-cra这个包的一些工具函数自动生成配置项。
首先安装它yarn add customize-cra -D，之后开始编写config-overrides.js，内容如下：

const path = require('path');
const