@script는 자바 스크립트 가져 오기에서 무엇을합니까?

예를 들면 다음과 같습니다.

import Component from '@/components/component'

내가보고있는 코드 ../에서 파일 경로와 관련하여 디렉토리에서 한 수준 위로 올라가는 것처럼 작동 하지만 더 일반적으로 무엇을하는지 알고 싶습니다. 불행히도 기호 검색 문제로 인해 온라인에서 문서를 찾을 수 없습니다.

모듈 식별자의 의미와 구조는 모듈 로더 또는 모듈 번 들러 에 따라 다릅니다 . 모듈 로더는 ECMAScript 사양의 일부가 아닙니다. JavaScript 언어의 관점에서 모듈 식별자는 완전히 불투명합니다. 따라서 실제로 어떤 모듈 로더 / 번 들러를 사용하고 있는지에 따라 다릅니다.

webpack / babel 설정에 babel-plugin-root-import 와 같은 것이 있습니다.

기본적으로 그것은 프로젝트의 근원에서 의미 합니다 . 그것은 같은 것을 쓰지 않아도됩니다.import Component from '../../../../components/component'

편집 : 존재하는 한 가지 이유 import Component from 'components/component'는 node_modules폴더 를 검색하지 않고 대신 검색 하기 때문 입니다.

그것이 오래되었다는 것을 알고 있지만 그것이 어떻게 정의되어 있는지 정확히 알지 못했기 때문에 그것을 찾고, 들어오고, 조금 더 깊이 파고 마침내 Vue-CLI ( Vue.js )에서 생성 된 Webpack 구성 에서 이것을 발견했습니다.

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

이 경우 프로젝트의 vue-cli 생성 src 디렉토리의 루트를 가리키는 별칭입니다.

Ben의 답변을 보다 포괄적으로 만들려면 :

첫째로 당신은 추가 할 필요가 babel-plugin-root-import귀하의 devDependencies에서 package.json(사용하는 경우 yarn: yarn add babel-plugin-root-import --dev). 그런 .babelrc다음 plugins키에 다음 줄을 추가하십시오 .

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

이제을 사용할 수 있습니다 @. 예를 들면 다음과 같습니다.

대신에

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

당신은 할 수 있습니다

import xx from '@/utils/somefile'

위에서 말한 것처럼이 기능은 기본적으로 JS에 없습니다. 그것을 즐기려면 babel 플러그인을 사용해야합니다. 그리고 그 일은 간단합니다. JS 파일의 기본 루트 소스를 지정하고 파일 가져 오기를 해당 파일에 맵핑하는 데 도움이됩니다. npm을 통해 설치를 시작하려면 다음을 수행하십시오.

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

또는

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

만들기 .babelrc앱 루트와 취향에 다음 설정을 구성합니다

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

위의 구성을 사용하면 다음과 같이 해당 소스에서 간단히 가져올 수 있습니다.

import Myfile from "@/Myfile" 

이 모든 펑키 한 일을하지 않고 :

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

"~"보트에 떠 있는 것처럼 기호를 변경할 수도 있습니다 .

VS 코드를 사용하여 반응하는 기본 앱을 빌드하고 있습니다.

필요한 것은 :

1. 앱의 루트 경로에 jsconfig.json을 만듭니다.

2. jsconfig.json에서 다음 코드를 추가하십시오.

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

기본적으로 "바로 가기"와 같이 : [ "abs_path"]