专业人士如何摆脱相对导入

进入jsconfig.json

基本网址

路径

TypeScript

总结

感谢阅读

如果您曾经开发过一个相当大的Node.js应用程序（无论是JavaScript还是TypeScript），您都会遇到像这样的长导入：

import User from "../../../../models/User";

这让你去：

动图

数百次重写长导入代码会让任何人感到烦躁。本文将向您展示如何将这些长导入代码压缩为紧凑且简短的导入代码。毕竟：

更短的代码 == 更快乐的开发者 😉

进入jsconfig.json

jsconfig.json你可能会问，什么是？jsconfig.json嗯，可以被认为是的后代tsconfig.json，其allowJs属性设置为true。

简单来说，jsconfig.json是一个指定该目录是 JavaScript 项目根目录的文件。tsconfig.json&jsconfig.json文件指定了编译项目所需的根文件和编译器选项。

欲了解更多信息jsconfig.json，请参阅本文。

为了演示目的，我们将开发具有以下文件结构的演示项目：

.
│   app.js
│   jsconfig.json
│   package.json
│   
├───models
│       user.js
│       
└───utils
    ├───colors
    │       converter.js
    │       generateColor.js
    │       
    └───datetime
            formatter.js
            timezoneHelpers.js

基本网址

摆脱长导入的最简单方法是添加baseUrl（jsconfig.json如果jsconfig.json没有，则在项目的根级别添加）。

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

太棒了！现在你可以直接访问项目根目录下的文件和文件夹了。因此，要在User模型中导入颜色相关的函数，你现在可以使用：

import { hexToRgb, rgbToHex } from 'utils/colors/converter'

代替：

import { hexToRgb, rgbToHex } from '../utils/colors/converter'

这只是本演示中的一个小改进，但如果您的项目有很多嵌套文件夹，它将导致显著的减少。

但让我们尝试做得更好。

路径

路径允许我们聚合预定义名称下的目录列表，并大幅减少导入的长度。

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@models/*": [
                "./models/*"
            ],
            "@colors/*": [
                "./utils/colors/*"
            ],
            "@datetime/*": [
                "./utils/datetime/*"
            ]
        }
    }
}

models我们正在聚合文件夹中名为 的所有文件。和 的@models情况也是如此。我们可以在 import 语句中使用、和引用这些文件夹。因此，colorsdatetime@models@colors@datetime

import { hexToRgb, rgbToHex } from '../utils/colors/converter'

最终简化为：

import { hexToRgb, rgbToHex } from '@colors/converter'

值得注意的事项：

1. 不必与实际文件夹名称pathname 相同。但最好保持相同以避免混淆。

2. 你可以将任意数量的文件夹聚合到任意一个下pathname。我们来看一个有点荒唐的例子：
   

   "@colors/*": [
       "./utils/colors/*",
       "./utils/datetime/*"
   ]
   

   这将导致datetime和colors文件夹都聚合在名称下@colors。

TypeScript

我们讲到的所有内容都可以在TypeScript中使用。只需替换jsconfig.json为tsconfig.json即可。

注意：正如TalOrlanczyk在评论中指出的那样，这不适用于create-react-app。解决方法在下面的评论中提供。

总结

本文介绍了如何将烦人的长导入语句优化为简洁的短语句。希望这对您的开发之旅有所帮助！:)

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。