Co robi symbol @ w imporcie javascript?

Question

Na przykład:

import Component from '@/components/component' 

W kodzie Patrzę na to zachowuje się jak ../ idzie w górę o jeden poziom 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.

Answer 1

Znaczenie i struktura identyfikatora modułu zależy od modułu modułu ładującego lub moduł pakujący moduły. Moduł ładujący nie jest częścią specyfikacji ECMAScript. Z perspektywy języka JavaScript identyfikator modułu jest całkowicie nieprzejrzysty. Tak naprawdę to zależy od tego, który moduł ładujący/pakujący moduł używasz.

Najprawdopodobniej masz coś podobnego do babel-plugin-root-import w swojej konfiguracji.

Zasadniczo oznacza to z korzenia projektu .. to unika konieczności pisania rzeczy jak import Component from '../../../../components/component'

Edit: Jednym z powodów jest to, ponieważ istnieje import Component from 'components/component' tego nie robi, ale zamiast szukać w node_modules folderu

Answer 2

wiedzieć, że jest stary, ale nie był do końca pewien, jak to określono, więc poszukaliśmy go, przyszedł, wykopali głębiej iw końcu znalazłem to w moim Vue-CLI (Vue.js) generowane WebPACK config

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

więc aliasem która w tym przypadku punkty do korzeni vue-cli generowane katalogu src projektu

Answer 3

Aby Ben „s odpowiedź bardziej wszechstronny:

Najpierw trzeba dodać babel-plugin-root-import w swoim devDependencies w package.json (Jeśli używasz yarn: yarn add devDependencies --dev). Następnie w .babelrc dodać następujące linie do plugins klucza:

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

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

Zamiast

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

Can

import xx from '@/utils/somefile'