目录
使用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