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

例如:

import Component from '@/components/component'

在我正在查看的代码中，它的行为类似于../在目录中相对于文件路径上升一层，但我想更一般地知道它是做什么的。不幸的是，由于符号搜索问题，我在网上找不到任何文档。

81242 次浏览
小开
最佳答案

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

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

基本上它的意思是从项目的根源开始..它避免了必须写import Component from '../../../../components/component'这样的东西

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

小开

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

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

因此，它是一个别名，在本例中指向vue-cli生成的项目SRC目录的根目录

更新:正如@aderchox在评论中正确提到的那样，这是一个通用的Webpack功能，并不局限于Vue

小开

要使本的回答更全面:

首先你需要在你的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'

小开
如上所述，这个特性在JS中默认不存在。你必须使用通天塔插件才能享受它。它的工作很简单。它允许你为你的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"

注意，你也可以将符号更改为诸如"~"之类的任何符号，如果这样可以让你的船浮起来的话。

小开

我使用VS代码来构建react原生应用程序。

你需要的是:

    在你的App的根路径下创建一个jsconfig.json 李enter image description here < / >
  1. 在你的jsconfig.json中，添加以下代码:
{
"compilerOptions": {
"baseUrl": ".",
"target": "ES6",
"module": "commonjs",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@core/*": ["src/core/*"]
}
},
"exclude": ["node_modules"]
}

基本上像"shortcut" : ["abs_path"]

小开

它是一种重新映射模块路径的方式，而不是ES本身的一部分，你必须使用babel导入特性。

小开

// @ is an alias to /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答案学到的。

小开

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

{
"compilerOptions": {


...


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

提交答案