JS 的 import 默认不支持绝对路径。对于嵌套层次比较多的 JS 文件，去 import 时可能非常麻烦，需要往上走很多级：

import MyUtilFn from '../../../../utils/MyUtilFn';

期望的方式是，可以按项目根目录做绝对路径的引用：

import MyUtilFn from 'utils/MyUtilFn';

有几个方式可以实现绝对路径引用。create-react-app 支持 jsconfig.json 文件来实现。构建工具中，Babel 和 Webpack 也都支持实现。

Create React App

CRA 内置了对绝对路径引用的支持，按 文档 进行配置即可。

Webpack

Webpack 可以通过在配置文件中 配置 alias 来实现。

Babel

Babel 有插件可以实现此效果。常用的 Babel 插件有两个：

• entwicklerstube/babel-plugin-root-import
• tleunen/babel-plugin-module-resolver

后者（tleunen/babel-plugin-module-resolver）在 GitHub 上的流行程度、维护程度都更佳。

具体使用方法看 GitHub。

一个要注意的点是，在 .babelrc 中不仅要配置 root，还需要配置 alias。这个插件不会默认在 root 下找目录来 import。这让我觉得非常奇怪：

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ".",
        "alias": {
          "pages": "./pages",
          "components": "./components",
          "interfaces": "./interfaces"
        }
      }
    ]
  ]
}

比如这个例子，如果你不配置 components 的路径映射，那么 import from components 并不会起作用。