Co robi symbol @ w imporcie javascript?

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.

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

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

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'

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ą.

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

Potrzebujesz:

1. utwórz plik jsconfig.json w ścieżce głównej aplikacji

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”]