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

阅读本文只需6分钟

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

哈利路亚，感谢上帝，圣母玛利亚，观世音，唐三藏，关二爷或者土地公公。

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

输入路径更加容易, 不再需要 ../../../../地狱模式
你可以复制/粘贴代码包括导入到其他文件中，而不需要修改引用路径
你可以移动文件而不需要更新引用路径(假如你的IDE没有帮你这么做)
简洁

image.png

根据官方文档的解释，在你项目的根目录下创建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 (
    
      
      
      Learn more
    
  );
}

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 (
    
      
      
      Learn more
    
  );
}

export default App;

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

WebStorm config

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

image.png

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

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

image.png

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

image.png

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

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

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

function App() {
  return (
    
    
  );
}

export default App;

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


Learn more

经过设置的 Webstorm 将会知道我们需要 Learn more

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

WebStorm config

VS Code — 不需要任何配置

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

ESLint

恢复清晰度(Restoring clarity)

你可能感兴趣的:(Create React app 引用中使用绝对路径)