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

resumen javascript pdf

Question

Por ejemplo:

import Component from ''@/components/component''

En el código que estoy viendo, se comporta como .../ subiendo 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.

Answer 1

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 asignar sus importaciones de 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 .babelrc en 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 eso vuela su barco.

Answer 2

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 como import 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 carpeta node_modules

Answer 3

Para hacer la respuesta de Ben más completa:

Primero debe agregar babel-plugin-root-import en sus devDependencies en package.json (si usa yarn : yarn add devDependencies --dev ). Luego, en su .babelrc agregue las siguientes líneas en la clave de plugins :

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

Ahora, puedes usar @ . Por ejemplo:

En lugar de

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

Usted puede

import xx from ''@/utils/somefile''

Answer 4

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