Was macht das @ -Symbol bei Javascript-Importen?

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.

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

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

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'

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.

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

Was Sie brauchen ist:

1. Erstellen Sie eine jsconfig.json unter dem Stammpfad Ihrer App

2. 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"]