Create React app 引用中使用绝对路径

阅读本文只需6分钟

随着 Create React App 3 的发布，我们现在引入组件或对象时可以使用绝对路径（ absolute import ),而不需要 eject 项目。

哈利路亚。

也许不用我解释你也知道这一利好，不过我还是总结一下好处。

../../../../地狱模式
复制/粘贴
IDE

根据官方文档的解释，在你项目的根目录下创建 jsconfig.json 文件，并添加以下代码。

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
复制代码

好极了，现在你可以像往常一样使用 相对路径

import React from 'react';
import Button from '../../Button/Button';
import { LINKS, STRINGS } from '../../../utils/constants';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
复制代码

或者，你可以使用 绝对路径 让一切变得简单，

import React from 'react';
import { LINKS, STRINGS } from 'utils/constants';
import Button from 'components/Button/Button';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
复制代码

不幸的是，官方解释到此为止了，但是你可能还需要做一些额外的配置。

WebStorm config

如果你是个 WebStorm/IntelliJ 用户，你一定遇见过这些烦恼:

WebStrom 根据 Node.js 规则假设绝对路径都在 node_modules , 所以我们必须告诉它我们需要酷一点使用绝对路径。

首先，设置你的 src 目录为 Resources Root 。

然后选择 Settings > Editor > Code Style > JavaScript , 进入 Imports tab 下勾选 Use paths relative to the project, resource or sources roots. 。

现在 Webstorm 明白了 绝对路径 该指向哪里。同时 jump-to-source/autocomplete 这些功能将会奏效，并且不再有警告，也意味着 auto-import 机制将使用 绝对路径 。

假如我们有这样一份文件:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
    </div>
  );
}

export default App;
复制代码

然后我们在该文件中复制如下代码:

<Button>{STRINGS.HELLO}</Button>
<a href={LINKS.HELP}>Learn more</a>
复制代码

经过设置的 Webstorm 将会知道我们需要 <Button> , STRINGS 和 LINKS , 并在合适的位置插入绝对路径引用。

import React from 'react';
import styles from './App.module.css';
import Button from 'components/Button/Button';
import { LINKS, STRINGS } from 'utils/constants';

function App() {
  return (
    <div className={styles.App}>
      <Button>{STRINGS.HELLO}</Button>
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;
复制代码

不过，它并没有按我需要的顺序插入引用,

npm package --> 相对路径引用

不过，哪怕我需要重新调整引用顺序，也好过使用相对路径。

VS Code — 不需要任何配置

VS Code 无师自通的理解 jsconfig.json ， 当使用 绝对路径 时， jump to source 和 Intellisense 依然正常运行。

其实VS Code 并不关心你的 绝对路径 指向的文件或目录是否存在，所以也并不需要你的任何配置。

注解 依我看，截止到 2019 年 5月为止， 整体上来说， Webstorm 依然比 VS Code 优秀一些，特别是 git tools 解决冲突, 代码重构方面，不过， VS Code 正在努力追赶，相比于Webstorm简直就是光速打开。

首字母大写惯例（Capital letters by convention）

在Webpack中使用 绝对路径 可能有很长一段时间了，并且使用 驼峰法(PascalCase) 为根引用路径起别名已经成为惯例(在  examples from the Webpack docs 中就是这么做的)。

这很聪明，我也强烈推荐在你的 codebase 中的 根目录(top-level directories)使用 驼峰法`命名。

当 Components 和 Utils 使用首字母大写，便可以很简单的区分哪些引用是 npm packages , 哪些是你自己的源码，你也绝对不会和 npm package 发生冲突。

同样的，避免在 src 的根目录下定义文件，比如，如果你定义了 src/constant.js , 在你引入的时候 import constants from 'constants' , 看起来就太太太奇怪了。

ESLint

CRA在他们的ESLint设置中有一套非常精简的规则，并且对为什么会这样有一些强烈的意见。如果你愿意，你可以不理会Facebook的建议(他们哪懂什么是React ，况且他们还是404), 然后使用 Airbnb 的 ESLint 配置。

如果你真这么做了，你会发现Airbnb使用 eslint-plugin-import ，它会检查未定义的导入，并给你如下错误:

你可以通过 ESLint 的 setting 来修复这个问题，告诉它路径可能是相对于 src 的:

"eslintConfig": {
  "extends": ["react-app", "airbnb"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
},
复制代码

请注意，你不需要为此安装任何的npm包， setting 就够了。

恢复清晰度(Restoring clarity)

对于没接触过 绝对路径引入 的开发者来说，暂时可能会有点迷惑，所以我建议加入一些关于这部分描述在你的 Readme 中, 包括怎样设置 IDE 。 你也可以把加上本文的链接，只要 简书 不倒闭，我保证我不会删除或者修改本文的内容，至多只是网络图片失效而已。

当然， 值得说明的是我们还是需要使用 相对路径引入 。 我认为在同一目录下的文件使用 相对路径 引入会更加方便， 使用 绝对路径 反而会使路径变得冗长。 同时，我建议你在一些相关的 child components 中使用 相对路径引入 。假如你有一个 <Dropdown> 组件并包含一个 <DropdownItem> 组件，这时还使用完整冗长的 绝对路径 引用就显得太过分了。

感谢阅读。 如果对你有所帮助，请留言或者点赞，感激不尽。

原文地址： hackernoon.com/absolute-im…

感谢原文作者：David Gilbertson