Was macht das @ -Symbol bei Javascript-Importen?

140

Beispielsweise:

import Component from '@/components/component'

In dem Code, den ich mir anschaue, verhält es sich so, als ../würde man im Verzeichnis relativ zum Dateipfad eine Ebene nach oben gehen, aber ich möchte allgemeiner wissen, was es tut. Leider kann ich aufgrund des Problems bei der Symbolsuche keine Dokumentation online finden.

javascript

— Laser
quelle

Mögliches Duplikat der Verwendung des @

— -Symbols

157

Die Bedeutung und Struktur der Modulkennung hängt vom Modullader oder Modulbündler ab . Der Modullader ist nicht Teil der ECMAScript-Spezifikation. Aus Sicht der JavaScript-Sprache ist die Modulkennung vollständig undurchsichtig. Es hängt also wirklich davon ab, welchen Modullader / Bundler Sie verwenden.

Sie haben höchstwahrscheinlich so etwas wie Babel-Plugin-Root-Import in Ihrer Webpack / Babel-Konfiguration.

Im Grunde bedeutet es von der Wurzel des Projekts .. es vermeidet, Dinge wie schreiben zu müssenimport Component from '../../../../components/component'

Bearbeiten: Ein Grund dafür ist, dass import Component from 'components/component'dies nicht der Fall ist, sondern im node_modulesOrdner gesucht wird

— Ben
quelle

2

Danke @ felix-kling für die Verbesserung meiner Antwort. Es ist eine viel bessere Erklärung als "keine Standardsache" :)

— Ben

84

Ich weiß, dass es alt ist, aber ich war mir nicht ganz sicher, wie es definiert ist, also habe ich es nachgeschlagen, bin vorbeigekommen, habe etwas tiefer gegraben und es schließlich in meiner von Vue-CLI ( Vue.js ) generierten Webpack-Konfiguration gefunden

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

Es handelt sich also um einen Alias, der in diesem Fall auf das Stammverzeichnis des von vue-cli generierten src-Verzeichnisses des Projekts verweist

— Kann Rau
quelle

Ist es möglich so etwas zu benutzen? '@*': ['client/src/*']Wo wird nur der Teil danach @ genommen, damit ich es tun kann import X from '@components/xund es richtig versucht, darauf zuzugreifen client/src/components/x? TS + VSCode erlaubt das bereits in genau dieser Form in tsconfig.json, jedoch Webpack-Fehler mit Can't resolve '@components/x' in 'client/src/'. Wenn ich es in Ihre Lösung ändere und die Importpfade dazu import X from '@/components/x'sofort funktionieren, sind die Pfade ansonsten korrekt.

— Qwerty

@Qwerty Keine Ahnung, weiß nicht, dass das @ * Ding nicht wusste, dass es in VSCode existiert, also kann ich nicht helfen

— Can Rau

29

Um Bens Antwort umfassender zu machen:

Zuerst müssen Sie hinzufügen babel-plugin-root-importin dem devDependenciesin package.json(Bei Verwendung von yarn: yarn add babel-plugin-root-import --dev). Fügen Sie dann in Ihrem Schlüssel .babelrcdie folgenden Zeilen ein plugins:

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

Jetzt können Sie verwenden @. Beispielsweise:

Anstatt

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

Du kannst

import xx from '@/utils/somefile'

— Ali MasudianPour
quelle

Ich habe das Plugin zu meinen Abhängigkeiten hinzugefügt, aber ich habe keine .babelrc. Ich habe es sogar im Root erstellt, funktioniert aber immer noch nicht? Ich habe gerade babel.config.js

— Kick Buttowski

8

Wie oben erwähnt, ist diese Funktion standardmäßig nicht in JS enthalten. Sie müssen ein Babel-Plugin verwenden, um es zu genießen. Und seine Arbeit ist einfach. Sie können eine Standardstammquelle für Ihre JS-Dateien angeben und Ihre Dateiimporte darauf zuordnen. So starten Sie die Installation über npm:

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

oder

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

Erstellen Sie eine .babelrcim Stammverzeichnis Ihrer App und konfigurieren Sie diese Einstellungen nach Ihrem Geschmack:

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

Mit der obigen Konfiguration können Sie einfach wie folgt aus dieser Quelle importieren:

import Myfile from "@/Myfile"

ohne all diese funky Sachen zu machen:

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

Beachten Sie, dass Sie das Symbol auch in etwas ändern können, das "~"Ihr Boot schwimmt.

— Wale
quelle

0

Ich verwende VS-Code, um native Apps zu erstellen.

Was Sie brauchen ist:

Erstellen Sie eine jsconfig.json unter dem Stammpfad Ihrer App
Fügen Sie in Ihrer jsconfig.json den folgenden Code hinzu:

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

im Grunde wie "Verknüpfung": ["abs_path"]

— Daniel Hua
quelle