@ 符号在 javascript 导入中有什么作用？

Question

例如：

import Component from '@/components/component'

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

Answer 1

如果您使用的是 Typescript，您可以像这样使用 tsconfig.json 来实现这一点：

{
  "compilerOptions": {

    ...

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

Answer 2

// @ is an alias to /src

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

我“推断”它是 /src 但想知道原因，因为 Ben 的 accepted answer 说这将是我项目的根，实际上是 @987654328 的父项目@。

这里是 Home.vue：

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

它是由Vue Webpack template定义的，我从this other SO answer那里学到的。

Answer 3

这是一种重新映射模块路径的方法，不是 ES 本身的一部分，你必须使用 babel 导入功能。

Answer 4

我正在使用 VS 代码构建 React Native 应用程序。

你需要的是：

1. 在你的 App 根路径下创建一个 jsconfig.json

2. 在您的 jsconfig.json 中，添加以下代码：

   { “编译器选项”：{ "baseUrl": ".", “目标”：“ES6”， “模块”：“commonjs”， “路径”：{ "@/":["src/"], "@components/" : ["src/components/"], "@core/" : ["src/core/"] } }, “排除”：[“node_modules”] }

基本上像“快捷方式”：[“abs_path”]

Answer 5

让Ben's answer更全面：

首先您需要在package.json 中的devDependencies 中添加babel-plugin-root-import（如果使用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'

Answer 6

如前所述，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"

请注意，您也可以将符号更改为 "~" 之类的任何东西，如果它能让您的船漂浮的话。

Answer 7

知道它很旧，但我不确定它是如何定义的，所以查了一下，经过，深入挖掘，最后在我的 Vue-CLI (Vue.js) 生成的 Webpack 配置中找到了它

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

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

Answer 8

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

你的 webpack/babel 配置中很可能有 babel-plugin-root-import 之类的东西。

基本上它意味着从项目的根目录..它避免了写import Component from '../../../../components/component'之类的东西

编辑：它存在的一个原因是import Component from 'components/component' 没有这样做，而是在node_modules 文件夹中搜索