译文原文链接 React Clean Code with Absolute Imports - 作者 Tasawar Hussain
React 是一个很受欢迎的 JavaScript 的库，用于构建用户界面。当我们使用 React 工作的时候，会发现我们需要从不同的文件中引入不同的模块。其中一个管理我们引入的方式是使用绝对路径引入。在本文中，我们将探讨在 React 中（无论你是用 Typescript 还是 JavaScript 组织代码）使用绝对路径导入的好处。
什么是绝对路径导入
在 JavaScript 中，当我们导入一个模块，我们需要指定需要导入的模块的文件路径。这个路径可以是相对路径或者绝对路径。相对路径是以一个点或者多个点开始，后面带个前斜线。
嗯，我们假设有下面一个 TODO 的应用，有下面的结构：
src/
components/
TodoList.tsx
TodoItem.tsx
screens/
TodoScreen.tsx
为了在 TodoScreen 组件中引入 TodoList 组件，我们可以如下引入：
import TodoList from "../../components/TodoList";
上面的声明使用了相对的路径从 components 文件夹中导入了 TodoList 模块。使用相对路径很容易出错，特别是当我们编写一个大型的项目，该项目有很多层级的目录。
为了避免这个问题，我们可以使用绝对路径来导入模块。绝对路径是从我们项目根目录开始，并指定我们想要导入的模块路径。以下是个案例👇
import TodoList from "components/TodoList";
该声明使用绝对路径从 src/components 目录中导入 TodoList 模块。使用绝对可以让我们避免错误和使得代码更容易维护。
在 TypeScript 中怎么使用绝对路径导入
如果我们在 React 中使用的是 TypeScript，我们可以在文件 tsconfig.json 中使用 baseUrl 和 paths 选项来配置绝对路径导入。下面是个例子👇
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
在 JavaScript 中怎么使用绝对路径导入
如果我们在 React 项目中使用 JavaScript，我们可以在根目录下的文件 jsconfig.json 中添加下面的内容：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
上面的配置设定 baseUrl 是你项目的根目录并且定义了一个 src/* 的路径映射。这意味着我们可以从 src 目录中使用绝对路径。
在 React 中使用绝对路径导入的好处
1. 简化导入
在 React 中使用绝对路径导入的最主要的好处就是简化我们的引入。相比于使用复杂的相对路径导入模块，我们可以使用简短的绝对路径导入。这让我们的代码更加容易读和维护。
比如，下面的相对路径：
import MyComponent from '../../../components/MyComponent';
上面使用了比较长和复杂的路径来引入 MyComponent 组件。相反的，使用绝对路径改写如下👇
import MyComponent from 'src/components/MyComponent';
上面这个声明使用了简洁的绝对路径导入 MyComponent 组件。
2. 避免文件路径错误
当我们使用相对路径时候，很容易错误导入文件。绝对路径通过指定我们想要导入的文件的精准位置来避免这个问题。这意味着我们可以避免写常见的错误，比如导入错误的文件或者文件丢失。
3. 重构更容易
使用绝对路径让我们重构代码更加容易。当我们在项目中移动文件或者目录，我们可以很简单地更新导入的路径。这为我们节约了不少时间并降低了引入错误的风险。
