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

Posted 2023-02-22

技术标签:

【中文标题】@ 符号在 javascript 导入中有啥作用？【英文标题】：What does the @ symbol do in javascript imports?@ 符号在 javascript 导入中有什么作用？ 【发布时间】：2017-09-19 23:15:42 【问题描述】：

例如：

import Component from '@/components/component'

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

【问题讨论】：

Use of @ symbol in Node module names的可能重复 【参考方案1】：

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


  "compilerOptions": 

    ...

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

【讨论】：

【参考方案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那里学到的。

【讨论】：

【参考方案3】：

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

【讨论】：

【参考方案4】：

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

你需要的是：

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

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

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

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

【讨论】：

【参考方案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'

【讨论】：

我将插件添加到我的 devdependencies 但我没有 .babelrc 。我什至在根目录下创建了它，但仍然不起作用？我只有 babel.config.js【参考方案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"

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

【讨论】：

【参考方案7】：

知道它很旧，但我不确定它是如何定义的，所以查了一下，经过，深入挖掘，最后在我的 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中存在，所以没办法【参考方案8】：

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

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

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

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