Javascript 项目中 import 包时路径中的 @ 是什么作用？

在使用 Javascript 开发前端项目的时候，经常会看到在使用 import 导入一个包的时候，from 指定的路径中是以一个 @ 开头的，像下面这样：

import { Navbar } from "@/components/Mobile/Navbar";
import { Sidebar } from "@/components/Sidebar/Sidebar";

这个@符号的作用是一个路径别名(alias)，通常会被定义成项目的根目录，这样在引入模块时就可以省略很长的相对路径，提高代码的可读性和可维护性。

例如，项目的根目录是/src，就可以在项目的配置文件中添加以下内容来配置@别名：

// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

// tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  },
}

然后，在代码中使用@别名来导入模块：

import MyComponent from '@/components/MyComponent';

路径会被自动识别为 src/components/MyComponent.js 。