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

例如：

import Component from '@/components/component'

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

模块标识符的含义和结构取决于模块加载程序或模块捆绑程序。模块加载器不是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目录的根

为了使本的答案更加全面：

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

如上所述，默认情况下，此功能不在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"

请注意，您也可以将符号更改为"~"漂浮在船上的符号。

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

您需要的是：

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

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

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

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

本文地址：http://javascript.askforanswer.com/fuhaozaijavascriptdaoruzhongqishenmezuoyong.html
文章标签：javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载