resumen - ¿Qué hace el símbolo @ en las importaciones de JavaScript?
resumen javascript pdf (4)
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.
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.
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
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''
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