JavaScript路径导航：开发Yelp API网站时如何轻松导入组件？

嘿，我完全懂这种反复试路径的痛苦——刚学JavaScript的时候，我也经常在导入组件时卡壳，总怕写错路径导致报错！下面我给你拆解几种常用的路径写法，还有能帮你省时间的小技巧：

一、先搞懂你现在用的相对路径 #

你目前用的./和../就是相对路径，核心是从「当前文件所在的位置」出发找目标文件：

• ./：代表当前文件所在的文件夹。比如你在src/App.js里写import logo from './logo.svg'，就是找和App.js同文件夹下的logo.svg。
• ../：代表往上走一级文件夹。比如你的项目结构是：

  项目根目录
  ├─ src
  │  ├─ components
  │  │  └─ Navbar.js
  │  └─ Business
  │     └─ Business.js
  

  那在Navbar.js里导入Business组件，就要写import '../Business/Business'——先从components文件夹往上走一级到src，再进入Business文件夹找目标文件。

二、你问的「根路径写法」：需要先配置 #

你提到的/root/components/Business/Business这种绝对路径，默认JS项目是不支持的，但我们可以通过简单配置让项目识别「项目根目录/指定文件夹」为起点的路径：

以React项目为例（Create App创建的） #

1. 在项目根目录新建一个jsconfig.json文件（如果是TypeScript项目就用tsconfig.json）
2. 写入以下配置：

{
  "compilerOptions": {
    "baseUrl": "src"  // 把src文件夹设为路径的起点
  },
  "include": ["src"]
}

配置完成后，不管你在哪个文件里，导入src下的组件都可以直接写绝对路径：
比如刚才的Business组件，不管是在App.js还是Navbar.js里，都可以写成：

import Business from 'Business/Business'

如果你的Business在src/components/Business下，就写import Business from 'components/Business/Business'，再也不用数多少个../了！

进阶：给常用文件夹设别名 #

要是觉得路径还是有点长，还可以给文件夹加别名，比如在jsconfig.json里加：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],  // @components 对应 src/components
      "@assets/*": ["assets/*"]          // @assets 对应 src/assets
    }
  },
  "include": ["src"]
}

之后导入组件就可以写成：

import Business from '@components/Business/Business'

不仅更简洁，还能一眼看出文件属于哪个模块！

三、省时间的小技巧 #

• 用VS Code这类编辑器的话，输入import之后开始敲组件名，编辑器会自动弹出路径提示，直接选就行，不用手动写路径。
• 可以把项目结构整理得更清晰（比如所有组件都放在src/components下，资源放在src/assets），这样不管用相对还是绝对路径，逻辑都更顺。

慢慢练几次，熟悉了路径的逻辑之后，就再也不用反复试错啦！

内容的提问来源于stack exchange，提问作者itsolidude