Cosa fa il simbolo @ nelle importazioni javascript?

141

Per esempio:

import Component from '@/components/component'

Nel codice che sto guardando si comporta come ../salire di un livello nella directory rispetto al percorso del file, ma mi piacerebbe sapere più in generale cosa fa. Purtroppo non riesco a trovare alcuna documentazione online a causa del problema di ricerca dei simboli.

javascript

— Laser
fonte

Possibile duplicato dell'uso del simbolo @ nei nomi dei moduli del nodo

— Bergi,

158

Il significato e la struttura dell'identificatore del modulo dipendono dal caricatore del modulo o dal bundler del modulo . Il caricatore del modulo non fa parte delle specifiche ECMAScript. Dal punto di vista del linguaggio JavaScript, l'identificatore del modulo è completamente opaco. Quindi dipende davvero dal caricatore / bundler del modulo che stai utilizzando.

Molto probabilmente hai qualcosa come babel-plugin-root-import nella tua configurazione webpack / babel.

Fondamentalmente significa dalla radice del progetto .. evita di dover scrivere cose del genereimport Component from '../../../../components/component'

Modifica: uno dei motivi per cui esiste è perché import Component from 'components/component'non lo fa ma cerca invece nella node_modulescartella

— Ben
fonte

2

Grazie @ felix-kling per migliorare la mia risposta. È una spiegazione molto migliore di "non una cosa normale" :)

— Ben

84

So che è vecchio, ma non ero esattamente sicuro di come fosse definito, quindi ho cercato, scavato un po 'più a fondo e alla fine l'ho trovato nella mia configurazione Webpack generata da Vue-CLI ( Vue.js )

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

quindi è un alias che in questo caso punta alla radice della directory src del progetto generata da vue-cli

— Can Rau
fonte

È possibile usare qualcosa del genere? '@*': ['client/src/*']dove viene presa solo la parte successiva @ , in modo che io possa fare import X from '@components/xe che tenti di accedere correttamente client/src/components/x? TS + VSCode lo consente già in questa forma esatta in tsconfig.json, tuttavia errori di webpack con Can't resolve '@components/x' in 'client/src/'. Quando lo cambio alla tua soluzione e i percorsi di importazione in import X from '@/components/x'essa iniziano immediatamente a funzionare, quindi i percorsi sono altrimenti corretti.

— Qwerty,

@Qwerty Nessuna idea, non so la cosa @ * non sapevo che esistesse in VSCode, quindi non posso fare a meno

— Can Rau,

29

Per rendere la risposta di Ben più completa:

Per prima cosa devi aggiungere il babel-plugin-root-importtuo devDependenciesin package.json(Se si utilizza yarn:) yarn add babel-plugin-root-import --dev. Quindi .babelrcaggiungi le seguenti righe in pluginschiave:

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

Ora puoi usare @. Per esempio:

Invece di

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

Puoi

import xx from '@/utils/somefile'

— Ali MasudianPour
fonte

Ho aggiunto il plug-in alle mie dipendenze ma non ho .babelrc. L'ho persino creato nella radice, ma non funziona ancora? Ho appena babel.config.js

— Kick Buttowski il

8

Come detto sopra, questa funzione non è in JS per impostazione predefinita. Devi goderti un plug-in babel per divertirti. E il suo lavoro è semplice. Ti consente di specificare una fonte root predefinita per i tuoi file JS e ti aiuta a mappare le importazioni dei file su di esso. Per iniziare, installare tramite npm:

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

o

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

Crea un .babelrcnella radice della tua app e configura queste impostazioni secondo i tuoi gusti:

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

Con la configurazione sopra, puoi semplicemente importare da quella fonte come:

import Myfile from "@/Myfile"

senza fare tutte queste cose funky:

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

Nota che puoi anche cambiare il simbolo in qualcosa di simile "~"se questo fa galleggiare la tua barca.

— Wale
fonte

0

Sto usando il codice VS per creare app native reattive.

Ciò di cui hai bisogno è:

crea un jsconfig.json nel percorso principale della tua app
nel tuo jsconfig.json, aggiungi il seguente codice:

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

sostanzialmente come "scorciatoia": ["abs_path"]

— Daniel Hua
fonte