阅读 4024

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,完美解决。

文章分类
前端
文章标签