厌倦了相对导入？是时候摆脱它们了！

基础网址

路径

TypeScript

结论

在您作为 JavaScript 开发人员的旅程中，您肯定会遇到以下类型的导入：

import Car from '../../../vehicles/car'
import House from '../../../buildings/house'

你可能还因为它们的丑陋而感到困扰……

但你猜怎么着？我以救世主的身份来教你如何摆脱它们！（真的）😎

准备好了吗？出发！🏁

基础网址

摆脱这些糟糕的导入最简单的方法就是编辑你的jsconfig.json文件。如果你还没有创建文件，可以直接在项目根目录下创建。

让我们用下面的键来完成它：

{
    "compilerOptions": {
        "baseUrl": "."
    }
}

现在，你们中最勤奋的人可能会想：“编译器选项？但是 JavaScript 不是编译语言！”。没错！如果你想知道为什么这个键存在，我建议你点击Visual Studio Code 官方网站上的这个链接。

现在，想象一下以下目录结构：

.
├── components
│   └── layouts
│       └── header.js
├── styles
│   └── header.css
└── jsconfig.json

如果您想将header.css样式文件包含在header.js文件中，现在可以这样做：

// header.js
import 'styles/header.css'

如果没有这个配置，你可以这样做：

// header.js
import '../../styles/header.css'

现在，无论您对项目架构的了解有多深，您都能够像在项目根目录一样导入文件。😲

显然，您仍然可以从当前所在的目录相对导入它们！

.
├── src
│   ├── vehicles
│   │   └── car.js
│   │   └── truck.js
│   └── index.js
└── jsconfig.json

// index.js
import truck from './vehicles/truck.js'

路径

回到我们的jsconfig.json。您还可以添加paths键，以便将导入映射到特定文件夹。这对于在导入中为某些文件夹指定别名非常有用。

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "css/*": ["styles/*"]
        }
    }
}

考虑到我们在上一部分中看到的相同文件夹结构，您现在可以像这样导入样式：

// header.js
import 'css/header.css'

但我完全不建议这样做，因为这会导致真实文件夹的名称和别名之间不一致——相反，为什么不简单地重命名实际文件夹呢？🤨

尽管如此，此选项对于您经常使用且不在项目根目录的文件夹非常有用。让我们考虑以下结构：

.
├── assets
│   ├── styles
│   │   └── index.css
|── src
│   └── index.js
└── jsconfig.json

我们经常使用styles目录来导入我们的样式，如果我们可以删除前缀，那将非常方便assets，这样就不必总是写这个：

import 'assets/styles/index.css'

在这种情况下，您可以将以下内容添加到您的jsconfig.json：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@styles/*": ["assets/styles/*"]
        }
    }
}

之后，您可以按照以下方式导入样式：

import '@styles/index.css'

这@是引用文件夹映射导入的常规方法，以将其与经典导入区分开来。

TypeScript

哦，你在用 TypeScript？太棒了！当然你也可以用这个技巧：唯一的区别是你不会把这些设置写在jsconfig.json文件里，而是写在……里面？

没错！就在tsconfig.json文件里。很巧妙，不是吗？😏

结论

就这样！你终于摆脱了那些糟糕的导入，恭喜！🎉

为了进一步了解，我建议您按照Visual Studio Code 官方网站上的此链接进行操作，特别是排除一些不属于源代码的目录。

话虽如此，我还是要感谢你一直读到我的文章，我希望你能从这篇文章中学到一些东西。😎