jsconfig.json 代码支持绝对导入 - Javascript

在 JavaScript 中，当你引用一个模块时，通常使用相对路径。例如，如果你想在 app.js 文件中加载 app/utils.js 这个模块，通常会这样写：

require('./utils');

这种方式的问题在于，如果你的文件夹结构发生变化，你需要手动修改所有相对路径的引用。更糟糕的是，当你在不同的目录中编写代码时，你无法轻松地理解文件根目录中的文件结构。这时候，绝对路径就是一个更好的选择。

幸运的是，在 TypeScript 2.0+ 和 Node.js 10.0.0+ 中，你可以通过创建一个 jsconfig.json 文件来实现绝对导入。

创建 jsconfig.json 文件

首先，你需要在你的项目根目录中创建一个名为 jsconfig.json 的文件。这个文件用来告诉编译器你的代码结构和如何解析模块。

以下是一个 jsconfig.json 文件的基本结构：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {}
  }
}

在这个基本结构中，我们定义了 baseUrl 和 paths 两个选项。baseUrl 指定了所有路径的根目录，以 / 结尾。paths 用于指定模块的别名和对应路径。

指定模块别名

在 jsconfig.json 中，你可以使用 paths 字段来为模块指定别名和对应路径。例如，如果你希望将 app/utils.js 模块的引用从相对路径 ../../app/utils 来指定为 @utils，你可以这样写：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["./app/utils"]
    }
  }
}

这将为 @utils 创建一个别名，并将其映射到 ./app/utils 的路径。现在，你可以使用以下代码来引用 app/utils.js：

require('@utils/utils');

如你所见，这样更容易理解而且更加清晰。如果你想为不同的模块创建别名，请添加一个新的条目到 paths 数组。

总结

通过一个简单的 jsconfig.json 文件，你可以对你的项目中的所有相对路径进行绝对导入。这使得你的代码更加可读且更加易于维护。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["./app/utils"]
    }
  }
}

现在你可以愉快地使用绝对路径来导入你的模块了：

require('@utils/utils');