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