@ 符号在 javascript 导入中有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42711175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does the @ symbol do in javascript imports?
提问by Laser
For example:
例如：
import Component from '@/components/component'
In the code I'm looking at it behaves like ../going up one level in the directory relative to the file path, but I'd like to know more generally what it does. Unfortunately I can't find any documentation online due to the symbol searching problem.
在我正在查看的代码中，它的行为就像../在相对于文件路径的目录中上升一级，但我想更一般地了解它的作用。不幸的是，由于符号搜索问题，我无法在线找到任何文档。
回答by Ben
The meaning and structure of the module identifier depends on the module loaderor module bundler. The module loader is not part of the ECMAScript spec. From a JavaScript language perspective, the module identifier is completely opaque. So it really depends on which module loader/bundler you are using.
模块标识符的含义和结构取决于模块加载器或模块捆绑器。模块加载器不是 ECMAScript 规范的一部分。从 JavaScript 语言的角度来看，模块标识符是完全不透明的。所以这真的取决于你使用的是哪个模块加载器/捆绑器。
You most likely have something like babel-plugin-root-importin your webpack/babel config.
你很可能在你的 webpack/babel 配置中有类似babel-plugin-root-import的东西。
Basically it means from the root of the project.. it avoids having to write things like import Component from '../../../../components/component'
基本上它意味着从项目的根..它避免必须编写类似的东西import Component from '../../../../components/component'
Edit:One reason it exists is because import Component from 'components/component'doesn't do that but instead search in the node_modulesfolder
编辑：它存在的一个原因是因为import Component from 'components/component'不这样做而是在node_modules文件夹中搜索
回答by Can Rau
Know it's old, but I wasn't exactly sure how it's defined, so looked it up, came by, dug a little deeper and finally found this in my Vue-CLI(Vue.js) generated Webpack config
知道它很旧，但我不确定它是如何定义的，所以查了一下，过来，挖得更深一点，最后在我的Vue-CLI( Vue.js) 生成的 Webpack 配置中找到了这个
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.join(__dirname, '..', dir)
}
},
so it's an alias which in this case points to the root of vue-cli generated src directory of the project
所以它是一个别名，在这种情况下指向 vue-cli 生成的项目 src 目录的根目录
回答by Ali MasudianPour
To make Ben's answermore comprehensive:
为了使本的回答更全面：
First you need to add babel-plugin-root-importin your devDependenciesin package.json(If using yarn: yarn add babel-plugin-root-import --dev).
Then in your .babelrcadd the following lines into pluginskey:
首先，你需要添加babel-plugin-root-import在你devDependencies的package.json（如果使用yarn：yarn add babel-plugin-root-import --dev）。然后在您.babelrc的plugins密钥中添加以下行：
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathPrefix": "@"
}
]
]
Now, you can use @. For example:
现在，您可以使用@. 例如：
Instead of
代替
import xx from '../../utils/somefile'
import xx from '../../utils/somefile'
You Can
你可以
import xx from '@/utils/somefile'
import xx from '@/utils/somefile'
回答by Wale
As said above, this feature is not in JS by default. You have to use a babel plugin to enjoy it. And its job is simple. It allows you to specify a default root source for your JS files and helps you map your file imports to it. To get started install through either npm:
如上所述，默认情况下，JS 中没有此功能。你必须使用 babel 插件才能享受它。它的工作很简单。它允许你为你的 JS 文件指定一个默认的根源，并帮助你将文件导入映射到它。要开始通过 npm 安装：
npm install babel-plugin-root-import --save-dev
or
或者
yarn add babel-plugin-root-import --dev
Create a .babelrcin the root of your app and configure these settings to your taste:
.babelrc在您的应用程序的根目录中创建一个并根据您的喜好配置这些设置：
{
"plugins": [
["babel-plugin-root-import", {
"rootPathSuffix": "the-preferred/root/of-all-your/js/files",
"rootPathPrefix": "@"
}]
]
}
With the config above, you can simply import from that source like:
使用上面的配置，您可以简单地从该源导入，例如：
import Myfile from "@/Myfile"
without doing all this funky stuff:
不做所有这些时髦的事情：
"/../../../Myfile"
Note that you can also change the symbol to anything like "~"if that floats your boat.
请注意，您还可以将符号更改为任何"~"可以漂浮您的船的符号。
回答by Daniel Hua
I am using VS code to build react native Apps.
我正在使用 VS 代码来构建 React Native Apps。
What you need is:
你需要的是：
create a jsconfig.json under root path of your App
in your jsconfig.json, add the following code:
{ "compilerOptions": { "baseUrl": ".", "target": "ES6", "module": "commonjs", "paths": { "@/":["src/"], "@components/" : ["src/components/"], "@core/" : ["src/core/"] } }, "exclude": ["node_modules"] }
在您的应用程序的根路径下创建一个 jsconfig.json
在 jsconfig.json 中，添加以下代码：
{ "compilerOptions": { "baseUrl": ".", "target": "ES6", "module": "commonjs", "paths": { "@/ ":["src/"], "@components / " : ["src/components/"], "@core/ " : ["src/core/"] } }, "exclude": ["node_modules"] }
basically like "shortcut" : ["abs_path"]
基本上就像“快捷方式”：[“abs_path”]
