例如:
import Component from '@/components/component'
在我看到的代码中，它表现得像../在目录中上升了一层相对于文件路径，但我想知道它是做什么的。不幸的是，由于符号搜索问题，我在网上找不到任何文档。
当前回答
如上所述，默认情况下JS中没有这个特性。你必须使用通天塔插件才能享受它。它的工作很简单。它允许你为你的JS文件指定一个默认的根源，并帮助你将你的文件导入映射到它。 通过npm开始安装:
npm install babel-plugin-root-import --save-dev
or
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"
注意，如果可以的话，还可以将符号更改为“~”之类的任何符号。
其他回答
为了让本的回答更全面:
首先你需要在你的devDependencies包中添加babel-plugin-root-import。如果使用yarn: yarn添加babel-plugin-root-import——dev)。 然后在你的.babelrc中将以下代码行添加到插件键中:
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathPrefix": "@"
}
]
]
现在，你可以使用@。例如:
而不是
从“../../utils/somefile”导入xx
你可以
从“@/utils/somefile”导入xx
它是一种重新映射模块路径的方式，而不是ES本身的一部分，你必须使用babel导入特性。
如上所述，默认情况下JS中没有这个特性。你必须使用通天塔插件才能享受它。它的工作很简单。它允许你为你的JS文件指定一个默认的根源，并帮助你将你的文件导入映射到它。 通过npm开始安装:
npm install babel-plugin-root-import --save-dev
or
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原生应用程序。
你需要的是:
创建一个jsconfig。json在你的应用的根路径下
在jsconfig中。Json，添加以下代码:
{
"compilerOptions": {
"baseUrl": ".",
"target": "ES6",
"module": "commonjs",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@core/*": ["src/core/*"]
}
},
"exclude": ["node_modules"]
}
基本上就像"shortcut": ["abs_path"]
// @是/src的别名
受到Can Rau回答的启发，我在我的src/views/Home中有了类似的发现。vue文件。该文件是使用最新版本(2021年7月，Ubuntu 20.04)创建的:
我“推断”它是/src，但想知道为什么，因为Ben接受的答案说它将是我的项目的根，实际上是/src的父。
这是Home.vue:
...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>
它是由Vue Webpack模板定义的，这是我从其他SO答案中学到的。
