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

Posted 2023-02-22

【中文标题】@ 符号在 javascript 导入中有啥作用？

【英文标题】：What does the @ symbol do in javascript imports?@ 符号在 javascript 导入中有什么作用？

【发布时间】：2017-07-31 08:56:40

【问题描述】：

例如：

import Component from '@/components/component'

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

【问题讨论】：

Use of @ symbol in Node module names的可能重复

【参考方案1】：

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

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

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

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

【讨论】：

感谢@felix-kling 改进我的回答。这比“不是标准的东西”更好的解释:)

【参考方案2】：

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

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

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

【讨论】：

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

@Qwerty 不知道，不知道@*这个东西不知道VSCode中存在，所以没办法

【参考方案3】：

让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'

【讨论】：

我将插件添加到我的 devdependencies 但我没有 .babelrc 。我什至在根目录下创建了它，但仍然不起作用？我只有 babel.config.js

【参考方案4】：

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

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

【参考方案5】：

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

你需要的是：

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

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

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

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

【参考方案6】：

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

  "compilerOptions": 

    ...

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

【参考方案7】：

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

【参考方案8】：

// @ 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那里学到的。