例如:
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文件中,添加以下代码:
{“ compilerOptions”:{“ baseUrl”:“。”,“ target”:“ ES6”,“ module”:“ commonjs”,“ paths”:{“ @ / ”:[“ src / ”],“ @components / “:[” src / components / “],” @ core / “:[” src / core / “]}}},” exclude“:[” node_modules“]}
基本上像“快捷方式”:[“ abs_path”]
这是一种重新映射模块路径的方法,而不是ES本身的一部分,您必须使用babel导入功能。
文章标签:javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!