CRA项目中设置alias path的最佳实践

2023-10-04 05:57:11

前言

当我们在CRA项目中使用typescript时，可能会遇到这样一个问题：每次重启项目，tsconfig.json中的别名设置都会被重置。这可能会导致项目构建失败或出现其他问题。为了解决这个问题，我们可以使用craco和craco-alias来设置别名路径。

使用craco和craco-alias设置alias path

craco是一个用于自定义CRA项目配置的工具。craco-alias是一个craco插件，允许我们在项目中设置别名路径。

安装craco和craco-alias

npm install craco craco-alias --save-dev

在项目根目录创建craco.config.js文件

module.exports = {
  plugins: [
    {
      plugin: cracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: './tsconfig.json',
      },
    },
  ],
};

在tsconfig.json文件中设置别名路径

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
    }
  }
}

重启项目

现在，当我们重启项目时，tsconfig.json中的别名设置将不会被重置。

手动修改tsconfig.json文件

除了使用craco和craco-alias之外，我们还可以手动修改tsconfig.json文件来设置别名路径。

在tsconfig.json文件中设置别名路径

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
    }
  }
}