@ 기호는 자바 스크립트 가져 오기에서 무엇을합니까? 예를 들어

Question

: 그것은 ../ 파일 경로에 상대적인 디렉토리에서 한 단계 올라가고처럼 동작에서

import Component from '@/components/component' 

코드에서 내가 찾고 있어요,하지만 난 더 일반적으로는 무엇을 알고 싶습니다. 불행히도 기호 검색 문제로 인해 온라인에서 어떤 설명서도 찾을 수 없습니다.

Answer 1

모듈 식별자의 의미 구조는 모듈 로더 또는 모듈 들러에 의존한다. 모듈 로더는 ECMAScript 사양의 일부가 아닙니다. 자바 스크립트 언어 관점에서 모듈 식별자는 완전히 불투명합니다. 따라서 실제로 사용하는 모듈 로더/번들에 달려 있습니다.

너는 아마도 webpack/babel 구성에 babel-plugin-root-import 같은 것을 가질 것입니다.

은 기본적으로는 같은 것들을 작성하지 피한다 .. 프로젝트의 루트에서 을 의미 import Component from '../../../../components/component'

편집 : import Component from 'components/component' 그렇게 대신에 검색하지 않기 때문에이 존재 한 이유는 node_modules 폴더

Answer 2

가 오래된 알고,하지만 난 그것이 정의되어 정확히 어떻게 확신하지 못했습니다, 그래서 그것을보고하여왔다 깊은 팠죠 및 (Vue.js) Vue-CLI가 웹팩 설정

생성 내 마지막이 발견 당신이 추가 할 필요가

첫째 :

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

은 그래서 프로젝트

Answer 3

의 VUE-CLI 생성 src 디렉토리의 루트에이 경우 포인트 Ben의 대답은 더 포괄적 만들려면 별칭이다 babel-plugin-root-importdevDependencies에 package.json (yarn : yarn add devDependencies --dev을 사용하는 경우).

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

을 지금, 당신은 @을 사용할 수 있습니다 : 그런 다음 .babelrcplugins 키에 다음 줄을 추가에 . 예를 들면 :

대신

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

의 당신 *

import xx from '@/utils/somefile'