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

532 阅读1分钟
npx create-react-app my-app --template typescript

通过 ceate-react-app 创建的 typescript 默认是看不到相关的 config 配置文件的。

但是,可以通过 yarn eject 弹出配置文件。

image.png

yarn eject 操作是不可逆的。

你会看到以下结构:

image.png

然后就可以更新 Webpack 配置以使用别名。

// config/webpack.config.js
...
modules.export = {
    ...
    resolve: {
        ...
        alias: {
            ...
            '@': path.resolve(__dirname, '../src')
        }
    }
}

更新Typescript配置,使用别名:

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

这样,在项目中就可以使用别名了。

image.png