React中超级干净、重构友好的导入语句

在本文中，学习一个小技巧，让您的 import 语句更简洁，更易于重构。

随着 create-react-app v3 的最新版本，现在支持备受追捧的绝对导入功能。 此功能是 Visual Studio Code IDE 的灵感来源，现在任何使用 Create React App 最新版本的人都可以使用。

什么是“绝对进口”？

通常，React 代码库变得非常大，项目的典型文件结构可能如下所示：

├── src
│   ├── components
│   │    ├── Header
│   │    ├── Footer
│   │    ├── Sidebar
│   │    ├── ...etc
│   ├── containers
│   ├── store
│   ├── reducers
│   ├── actions
│   └── helpers
├── public
├── package.json
└── README.md

每当您在项目中导入另一个 <Component/> 或某个本地模块时，您的文件。

深度嵌套的file.js

import { Header } from '../Header'
import { HeaderContainer } from '../../containers/HeaderContainer'
import headerStore from '../../store/headerStore'

如果您必须移动此文件，所有这些 import 语句都会中断。 最新 create-react-app@3.0.0 版本中的“绝对导入”通过更改 webpack 读取 import 语句的方式解决了这个问题，因此您可以使用以下语法：

深度嵌套的file.js

import { Header } from 'components/Header'
import { HeaderContainer } from 'containers/HeaderContainer'
import headerStore from 'store/headerStore'

看起来你正在导入一个名为“component”的 npm 模块，但事实并非如此。 webpack 使用您的 src 文件夹作为第一个查找位置，而不是 node_modules（默认）。

现在，当您需要移动此文件时，您的 import 语句不会中断！ 一个额外的好处是它看起来更干净，并且可以帮助刚接触您的代码库的人更清楚地了解您的项目是如何组织的。

用法

如果您使用的是 Create React App 3，您可以通过简单地将 jsconfig.json 文件添加到项目的根目录（其中 package.json 是）并指示 webpack 使用 [X182X ] 作为查找参考。 像这样：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

就是这样！ 您的项目现在将在开发和生产构建中使用绝对导入。

使用节点…

通过使用以下环境变量在 Create React App 项目的根目录中创建一个 .env 文件，有一种从 webpack 获取相同行为的老式方法：

NODE_PATH=src

但是，最新版本的 Create React App 会给你这个弃用警告：

绝对不推荐将 NODE_PATH 设置为解析模块，取而代之的是在 jsconfig.json（或 tsconfig.json，如果您使用 TypeScript）中设置 baseUrl，并将在 create-react-app 的未来主要版本中删除。

我有点奇怪，为什么 React 团队会弃用像 .env 文件这样的与工具无关的标准。 我唯一的猜测是 jsconfig.json 可能会成为 Create React App 未来版本的重要配置文件。

在 create-react-app 发行说明中阅读有关 绝对导入 的更多信息

结论

你对这个功能感到兴奋吗？ 在 Twitter @alligatorio 上告诉我们你的想法！ 我现在正在将它用于我的新项目，并且干净的语法真的在我身上成长✨