Co robi symbol @ w imporcie javascript?

141

Na przykład: 

import Component from '@/components/component'

W kodzie, na który patrzę, zachowuje się jak ../przejście o jeden poziom w górę w katalogu w stosunku do ścieżki pliku, ale chciałbym wiedzieć bardziej ogólnie, co robi. Niestety nie mogę znaleźć żadnej dokumentacji online z powodu problemu z wyszukiwaniem symboli.

javascript Laser
źródło
Możliwy duplikat użycia symbolu @ w nazwach modułów węzła
Bergi

Odpowiedzi:

158

Znaczenie i struktura identyfikatora modułu zależy od programu ładującego moduł lub bundlera modułów . Moduł ładujący moduł nie jest częścią specyfikacji ECMAScript. Z punktu widzenia języka JavaScript identyfikator modułu jest całkowicie nieprzejrzysty. Więc to naprawdę zależy od tego, jakiego modułu ładującego / pakującego używasz.

Najprawdopodobniej masz coś takiego jak babel-plugin-root-import w konfiguracji webpacka / babel.

Zasadniczo oznacza to od korzenia projektu … pozwala uniknąć konieczności pisania takich rzeczyimport Component from '../../../../components/component'

Edycja: Jednym z powodów, dla których istnieje, jest to, że import Component from 'components/component'nie robi tego, ale zamiast tego przeszukuje node_modulesfolder

Ben
źródło
2
Dzięki @ felix-kling za ulepszenie mojej odpowiedzi. To dużo lepsze wytłumaczenie niż „nie jest to standardowe” :)
Ben
84

Wiem, że jest stary, ale nie byłem do końca pewien, jak jest zdefiniowany, więc poszukałem go, przyszedłem, wykopałem trochę głębiej i ostatecznie znalazłem to w mojej konfiguracji Webpack wygenerowanej przez Vue-CLI ( Vue.js )

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

więc jest to alias, który w tym przypadku wskazuje na katalog główny projektu src wygenerowany przez vue-cli

Can Rau
źródło
Czy można użyć czegoś takiego? '@*': ['client/src/*']gdzie tylko część po @ zrobieniu tak, że mogę to zrobić import X from '@components/xi to właściwie próbuje uzyskać dostęp client/src/components/x? TS + VSCode pozwala już w tej dokładnej formie w tsconfig.json, jednak błędy webpacka z Can't resolve '@components/x' in 'client/src/'. Kiedy zmienię to na twoje rozwiązanie i ścieżki importu do import X from '@/components/x'niego natychmiast zaczynają działać, więc poza tym ścieżki są poprawne.
Qwerty,
@Qwerty Nie mam pojęcia, nie wiem, że coś @ * nie wiedziało, że istnieje w VSCode, więc nie mogę pomóc
Can Rau
29

Aby odpowiedzieć Benowi bardziej wyczerpująca:

Najpierw trzeba dodać babel-plugin-root-importw swoim devDependenciesIN package.json(W przypadku korzystania yarn: yarn add babel-plugin-root-import --dev). Następnie .babelrcdodaj następujące wiersze do pluginsklucza:

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

Teraz możesz użyć @. Na przykład:

Zamiast

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

Możesz

import xx from '@/utils/somefile'

Ali MasudianPour
źródło
Dodałem wtyczkę do moich devdependencies, ale nie mam .babelrc. Stworzyłem go nawet w katalogu głównym, ale nadal nie działa? Mam tylko babel.config.js
Kick Buttowski
8

Jak wspomniano powyżej, ta funkcja nie jest domyślnie dostępna w JS. Aby się nim cieszyć, musisz użyć wtyczki babel. A jego zadanie jest proste. Umożliwia określenie domyślnego źródła głównego dla plików JS i pomaga w mapowaniu do niego importowanych plików. Aby rozpocząć, zainstaluj za pośrednictwem npm:

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

lub

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

Utwórz .babelrcw katalogu głównym swojej aplikacji i skonfiguruj te ustawienia według własnego uznania:

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

Dzięki powyższej konfiguracji możesz po prostu zaimportować z tego źródła, na przykład:

import Myfile from "@/Myfile"

bez robienia tych wszystkich fajnych rzeczy:

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

Zwróć uwagę, że możesz również zmienić symbol na dowolny, podobny do "~"tego, że pływa twoją łodzią.

Krajka
źródło
0

Używam kodu VS do tworzenia natywnych aplikacji reagujących.

Potrzebujesz:

  1. utwórz plik jsconfig.json w ścieżce głównej aplikacji wprowadź opis obrazu tutaj

  2. w pliku jsconfig.json dodaj następujący kod:

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

zasadniczo jak „shortcut”: [„abs_path”]

Daniel Hua
źródło