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

2020/11/13 05:41 · javascript ·  · 0评论

例如:

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-CLIVue.js)生成的Webpack配置中找到了它

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

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

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

首先,你需要添加babel-plugin-root-import在你devDependenciespackage.json(如果使用yarnyarn 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代码来构建本机应用程序。

您需要的是:

  1. 在您的应用程序的根路径下创建一个jsconfig.json
    在此处输入图片说明

  2. 在您的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 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!