Que fait le symbole @ dans les importations javascript?

141

Par exemple:

import Component from '@/components/component'

Dans le code que je regarde, il se comporte comme ../monter 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 trouve aucune documentation en ligne en raison du problème de recherche de symboles.

javascript

— Laser
source

— Copie

158

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

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

Fondamentalement, cela signifie de la racine du projet .. cela évite d'avoir à écrire des choses commeimport Component from '../../../../components/component'

Edit: L'une des raisons pour lesquelles il existe est import Component from 'components/component'qu'il ne fait pas cela, mais recherche plutôt dans le node_modulesdossier

— Ben
source

2

Merci @ felix-kling pour améliorer ma réponse. C'est une bien meilleure explication que "pas une chose standard" :)

— Ben

84

Sachez que c'est vieux, mais je n'étais pas exactement sûr de la façon dont il est défini, alors j'ai cherché, je suis venu, j'ai creusé un peu plus profondément et j'ai finalement trouvé cela dans ma configuration Webpack générée par Vue-CLI ( Vue.js )

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

c'est donc un alias qui dans ce cas pointe vers la racine du répertoire src généré par vue-cli du projet

— Can Rau
source

Est-il possible d'utiliser quelque chose comme ça? '@*': ['client/src/*']où seule la partie après @ est prise, de sorte que je puisse le faire import X from '@components/xet qu'il tente correctement d'accéder client/src/components/x? TS + VSCode permet déjà cela sous cette forme exacte dans tsconfig.json, mais les erreurs Webpack avec Can't resolve '@components/x' in 'client/src/'. Lorsque je le change en votre solution et que les chemins d'importation vers import X from '@/components/x'celle-ci commencent immédiatement à fonctionner, les chemins sont par ailleurs corrects.

— Qwerty

@Qwerty Aucune idée, je ne sais pas que la chose @ * ne savait pas qu'elle existe dans VSCode, donc je ne peux pas aider

— Can Rau

29

Pour rendre la réponse de Ben plus complète:

Vous devez d'abord ajouter babel-plugin-root-importvotre devDependenciesin package.json(si vous utilisez yarn:) yarn add babel-plugin-root-import --dev. Ensuite, dans votre .babelrcajoutez les lignes suivantes dans la pluginsclé:

"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'

— Ali MasudianPour
source

J'ai ajouté le plugin à mes dépendances de développement mais je n'ai pas de .babelrc. Je l'ai même créé à la racine, mais ne fonctionne toujours pas? J'ai juste babel.config.js

— Kick Buttowski le

8

Comme indiqué ci-dessus, cette fonctionnalité n'est pas dans JS par défaut. 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 mapper vos importations de fichiers. Pour commencer, installez via npm:

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

ou

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

Créez un .babelrcà 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 depuis cette source comme:

import Myfile from "@/Myfile"

sans faire toutes ces choses géniales:

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

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

— Wale
source

0

J'utilise du code VS pour créer des applications natives de réaction.

Ce dont vous avez besoin est:

créer un jsconfig.json sous le chemin racine de votre application
dans votre jsconfig.json, ajoutez le code suivant:

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

essentiellement comme "raccourci": ["abs_path"]

— Daniel Hua
source