create-react-app typescript 配置路径别名

最近在开发新项目，时间比较紧急，所以并没有时间去浏览技术文章沉淀新知识。但只要用心，会思考，在业务开发中也是可以沉淀技术的。

这次的项目是用create-react-app搭建的，开发语言选的是typescript。由于是首次用typescript来开发搭建一个完整的项目（以前只是用typescript写写组件）遇到的坑还是挺多的。

今天先来分享第一个坑：配置路径别名。

一般的项目，我们可以在webpack.base.config文件里进行设置

webpack.base.config 文件

...
module.exports = {
    ...
    resolve: {
        alias: {
          '@': src
        }
    }
    ...
}
...

但create-react-app没有这个文件，因为脚手架默认把所有的配置都设置好了，如果想要修改就需要新建一个config-overrides.js文件去覆盖默认配置。

网上大部分资料都是以下两个步骤：

1.修改config-overrides.js文件：

const { override, addWebpackAlias, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

module.exports = override(
  addWebpackAlias({
    "@": path.resolve(__dirname, 'src')
  }),
  addDecoratorsLegacy(), 
);

2.在tsconfig.json文件中新增paths配置项:

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

将App.tsx中component的引入方式改为：

import component from '@/component'

第一步没什么问题，执行第二个步骤，当你npm run start启动项目的时候，项目编译报错：Cannot find module '@/component'。现在的你表情如下↓ ↓

这个时候你可以去tsconfig.json文件中看看，paths不见了！小朋友你是不是有很多问号？

解决方案

为了解决上述步骤二出现的问题，可以在项目根目录（src同级目录）新建一个paths.json文件，具体文件名称可自行修改，加入以下内容：

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

然后在tsconfig.json里修改：

"extends": "./paths.json"

ok，完美解决。