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

La signification et la structure de l'identifiant du module dépendent de l'identifiant du module. chargeur de module o module de regroupement . Le chargeur de module ne fait pas partie de la spécification ECMAScript. Du point de vue du langage JavaScript, l'identificateur de module est complètement opaque. Cela dépend donc vraiment du chargeur de module ou du regroupeur que vous utilisez.

Vous avez probablement quelque chose comme babel-plugin-Root-import dans votre configuration webpack/babel.

En gros, cela signifie de la Racine du projet cela évite d'avoir à écrire des choses comme import Component from '../../../../components/component'

Editar: L'une des raisons de son existence est que import Component from 'components/component' ne fait pas cela, mais cherche plutôt dans le fichier node_modules dossier

Answer 2

Je sais que c'est vieux, mais je ne savais pas exactement comment c'est défini, alors j'ai cherché, je suis passé, j'ai creusé un peu plus et j'ai finalement trouvé ceci dans mon Vue-CLI ( Vue.js ) généré par Webpack config

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

il s'agit donc d'un alias qui, dans ce cas, pointe vers le répertoire racine de vue-cli généré src du projet

Answer 3

Pour faire La réponse de Ben plus complet :

Vous devez d'abord ajouter babel-plugin-root-import dans votre devDependencies sur package.json (Si vous utilisez yarn : yarn add babel-plugin-root-import --dev ). Ensuite, dans votre .babelrc ajouter les lignes suivantes dans plugins clé :

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

Maintenant, vous pouvez utiliser @ . Par exemple :

Au lieu de

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

Vous pouvez

import xx from '@/utils/somefile'

Answer 4

Comme indiqué ci-dessus, cette fonctionnalité n'est pas présente par défaut dans JS. Vous devez utiliser un plugin babel pour en profiter. Et son travail est simple. Il vous permet de spécifier une source racine par défaut pour vos fichiers JS et vous aide à y faire correspondre vos importations de fichiers. Pour commencer, installez-le via npm :

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

ou

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

Créer un .babelrc dans la racine de votre application et configurez ces paramètres à votre goût :

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

Avec la configuration ci-dessus, vous pouvez simplement importer à partir de cette source comme :

import Myfile from "@/Myfile" 

sans faire tous ces trucs funky :

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

Notez que vous pouvez aussi changer le symbole en quelque chose comme "~" si cela fait flotter votre bateau.

Answer 5

J'utilise VS code pour construire des applications react native.

Ce dont vous avez besoin :

1. créer un jsconfig.json sous le chemin racine de votre application

2. dans votre jsconfig.json, ajoutez le code suivant :

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

en gros comme "shortcut" : ["abs_path"]