JavaScript: Module System: Absolute Import

20th August 2020 at 2:19pm
JavaScript: Module System

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 插件有两个:

后者(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 并不会起作用。