@符号在javascript导入中做了什么？

Question

例如:

import Component from '@/components/component'

在我看到的代码中,它的行为类似于../相对于文件路径的目录中的一个级别,但我想更一般地了解它的作用.遗憾的是,由于符号搜索问题,我无法在线找到任何文档.

Answer 1

模块标识符的含义和结构取决于模块加载器或模块捆绑器.模块加载器不是ECMAScript规范的一部分.从JavaScript语言的角度来看,模块标识符完全不透明.所以它实际上取决于您使用的模块加载器/捆绑器.

你很可能在你的webpack/babel配置中有类似babel-plugin-root-import的东西.

基本上它意味着从项目的根源 ..它避免了必须写的东西import Component from '../../../../components/component'

编辑:它存在的一个原因是因为import Component from 'components/component'不这样做,而是在node_modules文件夹中搜索

Answer 2

知道它已经过时了,但我并不确定它是如何定义的,所以查了一下,来了,挖得更深一些,最后在我的Vue-CLI(Vue.js)生成的Webpack配置中找到了这个

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

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

Answer 3

为了使babel-plugin-root-import答案更全面:

首先,你需要添加devDependencies在你package.json的yarn(如果使用yarn add devDependencies --dev:.babelrc).然后在您plugins的@密钥中添加以下行:

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

现在,你可以使用import xx from '../../utils/somefile'.例如:

代替

import xx from '@/utils/somefile'

您可以

babel-plugin-root-import

Answer 4

如果你使用 Typescript，你可以通过简单地使用你的tsconfig.json像这样来实现这一点：

{
  "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
      "@lib/*": ["app/lib/*"]
    }
  },
}

Answer 5

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

请注意，您也可以将符号更改为"~"使您的船浮起的任何符号。

Answer 6

我正在使用 VS 代码来构建 React Native Apps。

你需要的是：

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”]