在 JavaScript 的导入语句中，@ 符号有什么作用？

Question

例如：

import Component from '@/components/component'

在我看的代码中，../ 的行为类似于相对于文件路径向上跳一级目录，但我想更加了解它的一般性作用。不幸的是，由于符号搜索问题，我找不到任何在线文档。

- Laser

Answer 1

模块标识符的含义和结构取决于模块加载器或模块捆绑器。模块加载器不是ECMAScript规范的一部分。从JavaScript语言的角度来看，模块标识符是完全不透明的。因此，它真的取决于你使用的哪个模块加载器/捆绑器。

您很可能在webpack/babel配置中有类似babel-plugin-root-import的东西。

基本上它意味着从项目根目录开始.. 它避免了编写像import Component from '../../../../components/component'这样的代码。 编辑:它存在的一个原因是因为import Component from 'components/component'不会这样做，而是在node_modules文件夹中搜索。

- Ben

---

感谢 @felix-kling 改进了我的回答。这比“不是标准的东西”更容易理解 :) - Ben

非常感谢，那Node.js应用程序呢？像Express应用程序一样？是否仍然可能实现类似的功能？ - aderchox

对于使用 Laravel 的用户，请参见此答案。 - Joseph Meadows

Answer 2

我知道这很老了，但我不太确定它的定义是什么，所以查了一下，在我的Vue-CLI (Vue.js)生成的Webpack配置中找到了答案。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': path.join(__dirname, '..', dir)
    }
},

因此，在这种情况下，它是一个别名，指向项目中由vue-cli生成的src目录的根目录

更新: 正如@aderchox在评论中正确提到的那样，这是Webpack的一般功能，不仅限于Vue。

- Can Rau

---

是否可以使用类似这样的东西？'@*': ['client/src/*'] 只取 @ 后面的部分，这样我就可以使用 import X from '@components/x 并且它会正确地尝试访问 client/src/components/x 吗？在 tsconfig.json 中，TS + VSCode 已经允许以这种确切的形式进行操作，但是 webpack 报错 Can't resolve '@components/x' in 'client/src/'。当我将其更改为您的解决方案并将导入路径更改为 import X from '@/components/x' 时，它立即开始工作，因此路径本来就是正确的。 - Qwerty

@Qwerty 我不知道，不了解 @* 这个东西在 VSCode 中是否存在，所以无法提供帮助。 - Can Rau

我也使用这个解决方案，我想强调这是与Vue无关的，并且可以在“任何使用Webpack的设置”中完成。（因为在答案中将vue.js作为蓝色链接可能会使一些人忽略这个答案）。 - aderchox

你当然是对的@aderchox，谢谢，我已经将它添加到答案中以澄清。 - Can Rau

Answer 3

为了使Ben的回答更加全面:

首先，您需要将babel-plugin-root-import添加到您的devDependencies中，添加到package.json文件中（如果使用yarn： yarn add babel-plugin-root-import --dev）。 然后在您的.babelrc文件中，将以下代码添加到plugins键：

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

现在，您可以使用@。例如：

不需要再使用

import xx from '../../utils/somefile'

而是可以使用

import xx from '@/utils/somefile'

- Ali MasudianPour

---

我将插件添加到我的devdependencies中，但是我没有.babelrc文件。我甚至在根目录下创建了它，但仍然无法工作？我只有babel.config.js文件。 - Kick Buttowski

Answer 4

如上所述，此功能不是 JS 中默认的。您需要使用 Babel 插件才能享受此功能。它的工作很简单。它允许您为 JS 文件指定默认根源，并帮助您将文件导入映射到该根源。 要开始安装，请通过 npm 安装：

如上所述，此功能不是 JS 中默认的。您需要使用 Babel 插件才能享受此功能。它的工作很简单。它允许您为 JS 文件指定默认根源，并帮助您将文件导入映射到该根源。 要开始安装，请通过 npm 安装：

npm install babel-plugin-root-import --save-dev

或者

yarn add babel-plugin-root-import --dev

在您的应用程序根目录下创建一个.babelrc文件，并按照您的喜好配置以下设置：

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

使用上述配置，您可以像这样简单地从该源进行导入：

import Myfile from "@/Myfile" 

不用做所有这些花哨的东西：

"/../../../Myfile"

请注意，如果你喜欢的话，也可以将符号更改为任何符号，例如"~"。

- Wale

Answer 5

我正在使用VS Code构建React Native应用。

你需要做的是:

1. 在你的应用根目录下创建一个jsconfig.json文件

2. 在你的jsconfig.json文件中，添加以下代码：

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES6",
    "module": "commonjs",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@core/*": ["src/core/*"]
    }
  },
  "exclude": ["node_modules"]
}

基本上像"快捷方式"：["绝对路径"]

- Daniel Hua

Answer 6

如果你正在使用Typescript，你可以通过这样简单地使用你的tsconfig.json来实现：

{
  "compilerOptions": {

    ...

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

- Johnny Kontrolletti

Answer 7

// @是对/src的别名。

受Can Rau的回答启发，我在src/views/Home.vue文件中做出了类似的发现。这个文件是使用最新版本（2021年7月，Ubuntu 20.04）创建的：npx @vue/cli create myfirstvue --default。

我“推断”它是/src，但想知道为什么，因为Ben的已接受的答案说它将是我的项目根目录，实际上是父目录，/src是其子目录。

下面是Home.vue的内容：

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

这是由Vue Webpack模板定义的，我从此问题的另一个SO答案中学到。

- John

Answer 8

这是一种重映射模块路径的方法，不属于ES本身，你需要使用babel的导入功能。

- mabreu0