¿Qué hace el símbolo @ en las importaciones de JavaScript?

Por ejemplo:

import Component from '@/components/component'

En el código que estoy viendo, se comporta como ../subir un nivel en el directorio relativo a la ruta del archivo, pero me gustaría saber de manera más general qué hace. Lamentablemente, no puedo encontrar ninguna documentación en línea debido al problema de búsqueda de símbolos.

El significado y la estructura del identificador del módulo dependen del cargador del módulo o del paquete del módulo . El cargador de módulos no forma parte de la especificación ECMAScript. Desde la perspectiva del lenguaje JavaScript, el identificador del módulo es completamente opaco. Por lo tanto, realmente depende de qué cargador / paquete de módulos esté utilizando.

Lo más probable es que tenga algo como babel-plugin-root-import en su configuración webpack / babel.

Básicamente significa desde la raíz del proyecto ... evita tener que escribir cosas comoimport Component from '../../../../components/component'

Editar: Una razón por la que existe es porque import Component from 'components/component'no hace eso, sino que busca en la node_modulescarpeta

Sé que es viejo, pero no estaba exactamente seguro de cómo se define, así que lo busqué, lo encontré, cavé un poco más y finalmente encontré esto en mi configuración de Webpack generada por Vue-CLI ( Vue.js )

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

entonces es un alias que en este caso apunta a la raíz del directorio src generado por vue-cli del proyecto

Para que la respuesta de Ben sea más completa:

En primer lugar es necesario agregar babel-plugin-root-importen su devDependenciesen package.json(Si se utiliza yarn: yarn add babel-plugin-root-import --dev). Luego, en su .babelrcagregar las siguientes líneas en pluginsclave:

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

Ahora puedes usar @. Por ejemplo:

En vez de

import xx from '../../utils/somefile'

Usted puede

import xx from '@/utils/somefile'

Como se dijo anteriormente, esta característica no está en JS por defecto. Tienes que usar un complemento de babel para disfrutarlo. Y su trabajo es simple. Le permite especificar una fuente raíz predeterminada para sus archivos JS y le ayuda a asignarle las importaciones de sus archivos. Para comenzar, instale a través de npm:

npm install babel-plugin-root-import --save-dev

o

yarn add babel-plugin-root-import --dev

Cree un .babelrcen la raíz de su aplicación y configure estos ajustes a su gusto:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "the-preferred/root/of-all-your/js/files",
      "rootPathPrefix": "@"
    }]
  ]
}

Con la configuración anterior, simplemente puede importar desde esa fuente como:

import Myfile from "@/Myfile" 

sin hacer todas estas cosas funky:

"/../../../Myfile"

Tenga en cuenta que también puede cambiar el símbolo a algo como "~"si flota su barco.

Estoy usando el código VS para crear aplicaciones nativas de reacción.

Lo que necesitas es:

1. cree un jsconfig.json en la ruta raíz de su aplicación

2. En su jsconfig.json, agregue el siguiente código:

   {"compilerOptions": {"baseUrl": ".", "target": "ES6", "module": "commonjs", "caminos": {"@ / ": ["src / "], "@components / ": [" src / components / "]," @ core / ": [" src / core / "]}}," exclude ": [" node_modules "]}

básicamente como "acceso directo": ["abs_path"]