Que fait le symbole @ dans les importations javascript ?

Question

Par exemple :

import Component from '@/components/component'

Dans le code que je regarde, il se comporte comme suit ../ remonter d'un niveau dans le répertoire par rapport au chemin du fichier, mais j'aimerais savoir plus généralement ce qu'il fait. Malheureusement, je ne peux trouver aucune documentation en ligne en raison du problème de recherche de symboles.

Answer 1

Si vous utilisez Typescript, vous pouvez y arriver en utilisant simplement votre fichier tsconfig.json comme ça :

{
  "compilerOptions": {

    ...

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

Answer 2

C'est un moyen de remapper les chemins des modules, qui ne fait pas partie de l'ES elle-même, vous devez utiliser la fonction d'importation de babel.

Answer 3

// @ is an alias to /src

Inspiré par la réponse de Can Rau, j'ai fait une découverte similaire dans mon src/views/Home.vue fichier. Ce fichier a été créé avec les dernières versions (juillet 2021, Ubuntu 20.04) : npx @vue/cli create myfirstvue --default .

I " inféré " c'était /src mais il voulait savoir pourquoi, parce que Ben's réponse acceptée a dit que ce serait la Racine de mon projet, qui est en fait le parent, de /src .

Voici Home.vue :

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

Il est défini par Modèle Vue Webpack que j'ai appris de cette autre réponse de SO .