Was bedeutet das @ in einem Importpfad?

Lesezeit: 6 Minuten

Was bedeutet das @ in einem Importpfad
Chris Schmitz

Ich starte ein neues vue.js-Projekt, also habe ich das vue-cli-Tool verwendet, um ein neues Webpack-Projekt zu erstellen (z vue init webpack).

Als ich durch die generierten Dateien ging, bemerkte ich die folgenden Importe in der src/router/index.js Datei:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "https://stackoverflow.com/",
            name: 'Hello',
            component: Hello
        }
    ]
})

Ich habe das at-Zeichen nicht gesehen (@) in einem Pfad vor. Ich vermute, dass es (vielleicht?) Relative Pfade zulässt, aber ich wollte sicher sein, dass ich verstehe, was es wirklich tut.

Ich habe versucht, online herumzusuchen, konnte aber keine Erklärung finden (wahrscheinlich, weil ich nach “at sign” gesucht oder das wörtliche Zeichen verwendet habe @ hilft nicht als Suchkriterium).

Was bedeutet die @ tun in diesem Pfad (Link zur Dokumentation wäre fantastisch) und ist das eine es6-Sache? Eine Webpack-Sache? Eine Vue-Loader-Sache?

AKTUALISIEREN

Vielen Dank an Felix Kling, der mich auf eine andere doppelte Stackoverflow-Frage/Antwort zu derselben Frage hingewiesen hat.

Während der Kommentar zu dem anderen Stackoverflow-Beitrag nicht die genaue Antwort auf diese Frage ist (in meinem Fall war es kein Babel-Plugin), hat er mich in die richtige Richtung gewiesen, um herauszufinden, was es war.

In dem Gerüst, das vue-cli für Sie ankurbelt, richtet ein Teil der grundlegenden Webpack-Konfiguration einen Alias ​​für .vue-Dateien ein:

Alias-Speicherort innerhalb des Projekts

Dies ist sowohl insofern sinnvoll, als es Ihnen einen relativen Pfad aus der src-Datei gibt und es beseitigt die Anforderung des .vue am Ende des Importpfads (den Sie normalerweise benötigen).

Danke für die Hilfe!

  • Siehe meinen Kommentar.

    – Felix Klinge

    12. März 17 um 16:47 Uhr

  • @FelixKling Es ist kein exaktes Duplikat, weil es nicht die ganze Frage beantwortet, ist das eine es6-sache? Eine Webpack-Sache? Eine Vue-Loader-Sache?

    – Estus-Kolben

    12. März 17 um 16:52 Uhr

  • Ja, ich denke, die Frage war ähnlich, aber kein Duplikat. Unabhängig davon habe ich herausgefunden, woher es kam, und die Frage mit einer Erklärung aktualisiert, da ich sie nicht als Antwort hinzufügen kann.

    – Chris Schmitz

    12. März 17 um 16:56 Uhr

  • @estus: Die Antwort macht ziemlich deutlich, dass es kein Teil von ES6 ist, sondern eine Sache der Webpack-Konfiguration, meinst du nicht? Und genau das ist auch hier der Fall, nur dass die Art der Konfiguration etwas anders ist.

    – Felix Klinge

    12. März 17 um 17:05 Uhr


  • @FelixKling Es kommt darauf an. Aber da die Frage, die Sie verlinkt haben, keine detaillierte Antwort hat, die erklärt, was mit Webpack los ist, verdient sie wahrscheinlich eine Antwort. Normalerweise reicht der Kommentar „Mögliches Duplikat von …“, um die Verbindung zwischen den Fragen zu kennzeichnen, und vox populi erledigt den Rest. Ich habe gesehen, dass die Fragen zu oft auf SO übertölpelt wurden.

    – Estus-Kolben

    12. März 17 um 17:40 Uhr

1644069968 510 Was bedeutet das @ in einem Importpfad
Estus-Kolben

Dies geschieht mit Webpack resolve.alias Konfigurationsoption und ist nicht spezifisch für Vue.

In Vue Webpack-VorlageWebpack ist zum Ersetzen konfiguriert @/ mit src Weg:

  const path = require('path');

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

Der Alias ​​wird verwendet als:

import '@/<path inside src folder>';

  • JavaScript ist einfach nicht mehr JavaScript. Babel/Webpack gibt uns diese Frankenstein-Sprache und irgendwie sollen neue Entwickler wissen, wo die ECMAScript-Spezifikation endet und Userland-Plugins/Transformationen beginnen. Es ist wirklich traurig, imo.

    – Mulan

    13. März 17 um 4:13 Uhr

  • @naomik Es liegt am Benutzer, solche Tricks in das Setup einzuführen oder nicht. Für Vue ist das keine große Sache, da es sowieso auf sein benutzerdefiniertes .vue-Dateiformat angewiesen ist.

    – Estus-Kolben

    13. März 17 um 10:58 Uhr

  • Persönlich denke ich, dass die Möglichkeit, Flexibilität hinzuzufügen, wenn Sie dies wünschen, eine gute Sache ist. Ich sehe es weniger als Frankenstein und eher als Voltron; Sie können Dinge als Löwe tun oder verschiedene Löwen kombinieren, um einen größeren Roboter zu haben. Ja, manchmal bekommt man Fragen wie diese, aber es ist nicht so, dass die Antworten nicht gefunden werden können. Wirklich, Sie können die Frankenstein- oder Voltron-Ansicht mit jedem Projekt jeder Größe einnehmen, es geht nur darum, “Abhängigkeiten zu verwenden und zu verstehen”.

    – Chris Schmitz

    13. März 17 um 14:39 Uhr

  • @ChrisSchmitz Es kommt auf den Kontext und die Perspektive an. Wenn Sie so etwas tun, wird das Projekt auf die Verwendung von Webpack beschränkt. Dies ist möglicherweise keine gute Sache, wenn das Projekt beabsichtigt, native ES6-Module zu verwenden, wenn sie ankommen, oder wenn es sich um einen Knoten handelt, in dem CommonJS für Module verwendet werden kann. Andererseits können lange relative Pfade schwieriger zu warten und umzugestalten sein.

    – Estus-Kolben

    13. März 17 um 14:49 Uhr

  • Beim Benutzen vue-cli v3+ sollten Sie verwenden [email protected] referenzieren src Mappe. Z.B: $font-path: '[email protected]/assets/fonts/';

    – Consta Gorgan

    25. Januar 19 um 23:18 Uhr

Denken Sie auch daran, dass Sie auch Variablen in tsconfig erstellen können:

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

Dies kann für Namenskonventionszwecke verwendet werden:

import { componentHeader } from '@components/header';

  • Aber diese Art von Alias ​​wird im Quell-JS leer gelassen und dann muss zur Laufzeit ein Wrapper eingreifen, damit der Alias ​​funktioniert. Vielleicht gibt es über babel eine Möglichkeit, diese TS-Syntax zur Build-Zeit zu konvertieren? Mit Typoskript tsc ist nicht und deshalb brauchen Sie so etwas wie module-alias oder tsconfig-paths.

    – Ken

    27. Mai 20 um 22:55 Uhr


  • Nachdem ich diese Einstellungen hinzugefügt habe, kann Vs-Code den Pfad nicht neu finden und kann nicht in die Datei gehen, wenn Sie auf das importierte Modul klicken.

    – JackChouMine

    16. Oktober 21 um 7:19 Uhr

Ich komme mit folgender Kombination zurecht

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

Die IDE hört auf, den URI zu warnen, aber dies führt beim Kompilieren zu einem ungültigen URI in “buildwebpack.base.conf.js”.

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},

Bingoo!

auflösen(‘src’)
Nein funktioniert bei mir, aber path.resolve(‘src’) funktioniert

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

Versuchen Sie vielleicht, das Webpack hinzuzufügen. mix.webpackConfig Verweise Laravel-Mischung.

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

Und dann im vue Gebrauch.

<img src="https://stackoverflow.com/questions/42749973/@imgSrc/logo.png" />

Was bedeutet das @ in einem Importpfad
Dekan Schulze

Irgendetwas muss sich geändert haben. Die hier gegebene Antwort ist nicht mehr richtig. Dieses Projekt in Kapitel 09 verwendet das @-Zeichen in seinen Importanweisungen, aber die Datei webpack.config.js hat keine Pfadauflösungsanweisung:

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

.

784000cookie-checkWas bedeutet das @ in einem Importpfad?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy