javascript Import에서 @ 기호는 어떤 역할을 합니까?

javascript Import에서 @ 기호는 어떤 역할을 합니까?

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

import Component from '@/components/component'

내가 보고 있는 코드에서 이건 마치../파일 경로와 관련하여 디렉토리에서 한 단계 위로 올라가지만, 더 일반적으로 어떤 역할을 하는지 알고 싶습니다.안타깝게도 기호 검색 문제로 인해 온라인에서 문서를 찾을 수 없습니다.

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

웹 팩/바벨 구성에는 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 디렉토리의 루트를 가리키는 별칭입니다.

업데이트: @aderchox가 댓글로 올바르게 언급했듯이 이는 일반적인 웹 팩 기능으로 Vue에만 국한되지 않습니다.

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에는 없습니다.바벨플러그인을사용해야즐길수있습니다.그리고 그 일은 간단하다.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 할 수 있습니다.

import Myfile from "@/Myfile" 

이 모든 펑키한 것들을 하지 않고 말이야.

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

기호를 다음과 같은 방법으로 변경할 수도 있습니다."~"그게 배를 띄운다면요.

Typescript 를 사용하고 있는 경우는, 다음의 URL 를 사용해 주세요.tsconfig.json음음음같 뭇매하다

{
  "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
      "@lib/*": ["app/lib/*"]
    }
  },
}

리액트 네이티브 앱을 구축하기 위해 VS 코드를 사용하고 있습니다.

필요한 것은 다음과 같습니다.

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

2. jsconfig.json에 다음 코드를 추가합니다.

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

으로는 본적 basically basically basically basically "shortcut" : ["abs_path"]

// @ is an alias to /src

을 받아 는 칸 라우에서 .src/views/Home.vue 이 은 최신04) Ubuntu 20.04)으로되었습니다.npx @vue/cli create myfirstvue --default.

'추정'했더니/src벤이 받아들인 답변이 제 프로젝트의 근원이 될 거라고 했기 때문에 그 이유를 알고 싶었습니다. 사실 부모이기도 하죠./src.

여기는 집입니다.vue:

...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

Vue Webpack 템플릿에 의해 정의됩니다.이 템플릿은 다른 SO 답변에서 배운 것입니다.

이는 모듈 경로를 재매핑하는 방법이며 ES 자체의 일부가 아닙니다.바벨 Import 기능을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/42711175/what-does-the-symbol-do-in-javascript-imports