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

141

例如：

import Component from '@/components/component'

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

javascript

— 激光
source

节点模块名称

— Bergi，2013年

158

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

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

基本上，这意味着从项目的根源开始 ..它避免了编写类似import Component from '../../../../components/component'

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

— 本
source

2

感谢@ felix-kling改善了我的答案。它比“并不是一个标准的东西” :)一个更好的解释

— 奔

84

知道它已经很旧了，但是我不确定它的定义方式，因此对其进行了查找，挖掘，深入研究，最后在我的Vue-CLI（Vue.js）生成的Webpack配置中找到了它

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

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

— 芹R
source

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

— Qwerty

@Qwerty不知道，不知道@ *东西不知道它存在于VSCode中，所以无济于事

— Rau

29

做出本的答案更加全面：

首先，您需要添加 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'

— 阿里·马苏迪安倒
source

我将插件添加到我的依赖关系中，但没有.babelrc。我什至在根目录中创建了它，但是仍然行不通？我只有babel.config.js

— Kick Buttowski

8

如上所述，默认情况下，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"

请注意，您也可以将符号更改为"~"使您的船浮起的任何符号。

— 瓦勒
source

0

我正在使用VS代码来构建本机应用程序。

您需要的是：

在您应用的根路径下创建一个jsconfig.json
在您的jsconfig.json文件中，添加以下代码：

{“ compilerOptions”：{“ baseUrl”：“。”，“ target”：“ ES6”，“ module”：“ commonjs”，“ paths”：{“ @ / ”：[“ src / ”]，“ @components / “：[” src / components / “]，” @ core / “：[” src / core / “]}}}，” exclude“：[” node_modules“]}

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

— 丹尼尔·华
source