React 中超级简洁、重构友好的导入语句

在本文中,学习一个小技巧,让你的导入陈述更清洁,更容易重构。

有了最新版本的「Create-react-app」 v3,现在支持绝对导入的最受欢迎的功能,此功能源自Visual Studio Code IDE,现在可供任何使用最新版本的Create React App(https://andsky.com/tech/tutorials/react-create-react-app)的人使用。

什么是绝对进口?

通常情况下,React代码库变得相当大,一个项目的典型文件结构可能看起来像这样:

 1├── src
 2│   ├── components
 3│   │    ├── Header
 4│   │    ├── Footer
 5│   │    ├── Sidebar
 6│   │    ├── ...etc
 7│   ├── containers
 8│   ├── store
 9│   ├── reducers
10│   ├── actions
11│   └── helpers
12├── public
13├── package.json
14└── README.md

每当您在项目中导入另一个<Component/>或某个本地模块时,您将在文件中列出一堆./Foo,../foo和../../../foo-bar导入陈述。

1[label deeply-nested-file.js]
2import { Header } from '../Header'
3import { HeaderContainer } from '../../containers/HeaderContainer'
4import headerStore from '../../store/headerStore'

如果您不得不移动此文件,所有这些导入陈述都会被打破,绝对导入在最新的[email protected]版本中通过改变 webpack 如何读取您的导入陈述来解决这个问题,所以您可以使用以下语法:

1[label deeply-nested-file.js]
2import { Header } from 'components/Header'
3import { HeaderContainer } from 'containers/HeaderContainer'
4import headerStore from 'store/headerStore'

它可能看起来像你正在导入一个名为组件的npm模块,但这不是发生的事情。 webpack 正在使用你的src文件夹作为第一个搜索位置,而不是node_modules(默认)。

现在当你需要移动这个文件时,你的导入陈述不会破! 一个额外的奖励是它看起来更干净,并有助于对你的代码库的新人更清楚地了解你的项目是如何组织的。

使用

如果您正在使用 Create React App 3,您可以通过简单地将一个jsconfig.json文件添加到项目的根部(在那里是package.json)并指示 webpack 使用src作为搜索引用。

1[label jsconfig.json]
2{
3  "compilerOptions": {
4    "baseUrl": "src"
5  }
6}

你的项目现在将使用绝对进口开发,生产构建。

与节点一起...

有一个老式的方式来从webpack中获得这种行为,通过创建一个在您的Create React App项目根部的 .env文件,使用此环境变量:

1NODE_PATH=src

然而,最新版本的 Create React 应用程序会给你这个减值警告:

<$>[警告]设置NODE_PATH来解决模块完全被贬值,有利于在 jsconfig.json 中设置baseUrl(或如果您使用的是TypeScript的tsconfig.json),并将在未来的重大版本中删除create-react-app。

我有点疑惑,为什么React团队会忽视一个工具不明的标准,如.env文件,我的唯一猜测是jsconfig.json很可能会成为未来Create React App版本的重要配置文件。

<$>[注] 閱讀更多關於 絕對進口在『Create-react-app』發行筆記 <$>

结论

你对这个功能感到兴奋吗?让我们知道你在推特上(@alligatorio)的看法(https://twitter.com/alligatorio)!我现在正在为我的新项目使用它,清洁的语法确实在我身上生长。