Create React App 中的绝对导入

阻碍我使用 Create React App 的原因之一是缺少绝对导入。我非常喜欢自定义 webpack 配置中的绝对导入，以至于我离不开它。一段时间后，我发现它们也可以在 CRA 中配置！让我们看看怎么做。

为什么需要绝对导入？

在开发 React 应用的过程中，你可能会遇到类似如下代码的情况：多个相对嵌套的导入。管理起来非常困难！而当你在文件结构中移动代码时，情况就更糟了。



import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import Icon from './../../components/icon';
import AuthorAvatar from './../../components/author-avatar';
import Date from './../../components/date';
import Image from './../../components/image';
import HtmlLink from './../../components/html-link';
import { SOURCES } from './../../config/defaultConfig';

import * as styles from './index.scss';

绝对的进口来救援！

绝对导入可以帮助你使代码更加简洁、易读、易于管理。我们希望能够将路径从以下形式转变过来：



import useApi from './../../hooks/use-api';
import Date from './../../components/date';
import Image from './../../components/image';
import transfromUserData from './../../helpers/transform-user-data';
// etc...

对此：



import useApi from 'hooks/use-api';
import Date from 'components/date';
import Image from 'components/image';
import transfromUserData from 'helpers/transform-user-data';

假设你src的代码位于多个目录。我们需要创建src导入的基本路径。

第一步是jsconfig.json在 CRA 应用程序的根目录中创建文件（如果该文件尚不存在）（tsconfig.json如果您使用了 TypeScript 模板）。然后baseUrl向其中添加配置：



{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

这几行简单的代码会告诉 CRA 配置使用你的src目录作为导入的基础，这样你就可以用绝对路径导入组件了。之后，你可以在代码中修改导入方式，如下所示：



import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import replace from 'lodash/replace';

import Icon from 'components/icon';
import AuthorAvatar from 'components/author-avatar';
import Date from 'components/date-representation';
import Image from 'components/image';
import HtmlLink from 'components/html-link';
import { SOURCES } from 'config';

import * as styles from './index.scss';

干净多了，一点也不./../乱。希望你及时找到它！:)

文档参考：https ://create-react-app.dev/docs/importing-a-component#absolute-imports

文章来源：https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8