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.js里修改：

"extends": "./paths.json"
复制代码

ok，完美解决。