자바 스크립트 가져 오기 구문에 대괄호 사용

자바 스크립트 가져 오기 구문에 대괄호 사용

---

라이브러리를 가져 오기 위해 다음 구문을 사용하는 자바 스크립트 라이브러리를 발견했습니다.

import React, { Component, PropTypes } from 'react';

위의 방법과 다음의 차이점은 무엇입니까?

import React, Component, PropTypes from 'react';

---

import React, { Component, PropTypes } from 'react';

이것은 말합니다 :

이름 아래 에서 기본 내보내기를 가져오고 'react'이름 React이 지정된 내보내기 Component를 PropTypes동일한 이름으로 가져옵니다 .

이것은 아마 당신이 보았던 두 가지 일반적인 구문을 결합합니다

import React from 'react';
import { Component, PropTypes } from 'react';

첫 번째는 기본 내보내기를 가져오고 이름을 지정하는 데 사용되고 두 번째는 지정된 명명 된 내보내기를 가져 오는 데 사용됩니다.

일반적으로 대부분의 모듈은 단일, 기본 내보내기 또는 명명 된 내보내기 목록을 제공합니다. 모듈이 기본 내보내기 와 명명 된 내보내기를 모두 제공하는 것은 다소 일반적이지 않습니다 . 그러나 가장 일반적으로 가져 오는 기능과 추가 하위 기능이있는 경우 첫 번째 기능을 기본값으로 내보내고 나머지 기능을 명명 된 내보내기로 내보내는 것이 유효한 디자인입니다. 이러한 경우 import참조 하는 구문을 사용합니다.

다른 답변은 잘못된 질문과 혼동 될 수 있습니다. 아마도이 질문을 받았을 때 MDN 문서가 잘못되어 혼란 스러웠 기 때문일 수 있습니다. MDN이 그 예를 보여주었습니다

import name from "module-name";

및 상기 name은 "가져온 값을 수신 할 객체의 이름"입니다. 그러나 그것은 오도되고 잘못된 것입니다. 우선,이 아니라 하나 개 (그냥 "할당", 또는 "를 참조하는 데 사용"말없는 이유) "수신"될 것입니다 수입 값 name,이 경우 수입 값은이다 기본 내보내기 모듈에서 .

이를 설명하는 또 다른 방법은 위의 가져 오기가

import { default as name } from "module-name";

OP의 예는 정확히

import { default as React, Component, PropTypes } from 'react';

MDN 문서는 예제를 보여주기 위해 계속되었습니다.

import MyModule, {foo, bar} from "my-module.js";

그리고 그것이 의미한다고 주장했다.

전체 모듈의 내용을 가져오고 일부는 명시 적으로 이름을 지정합니다. 이렇게 하면 현재 범위에 myModule(sic) foo및을 bar삽입합니다. 참고 그 foo와 myModule.foo같은 있으며, 동일 bar및myModule.bar

여기에서 MDN이 말한 내용과 잘못된 MDN 설명서를 기반으로 다른 답변이 주장하는 것은 절대적으로 잘못되었으며 사양의 이전 버전을 기반으로 할 수 있습니다. 이것이 실제로하는 일은

기본 모듈 내보내기와 일부 이름이 지정된 내보내기를 가져옵니다. 이 삽입 MyModule, foo그리고 bar현재 범위에. 수출 이름 foo과는 bar있습니다 하지 를 통해 접근 할 수MyModule 인 기본 수출, 모든 수출을 포함하는 일부 우산입니다.

기본 모듈 내보내기는 export default구문으로 내 보낸 값이며이 값 은이기도합니다 export {foo as default}.

MDN 문서 작성자는 다음 형식과 혼동 될 수 있습니다.

import * as MyModule from 'my-module';

그러면에서 모든 내보내기를 가져오고 my-module와 같은 이름으로 액세스 할 수 있습니다 MyModule.name. MyModule.default기본 내보내기는 실제로 이름이있는 다른 명명 된 내보내기에 불과하기 때문에 로 액세스 할 수 있습니다 default. 이 구문에서는 명명 된 내보내기의 하위 집합 만 가져올 수있는 방법이 없지만 기본 내보내기 (있는 경우)를 이름이 지정된 모든 내보내기와 함께 가져올 수는 있지만

import myModuleDefault, * as myModule from 'my-module';

---

import React, { Component, PropTypes } from 'react'

이 보낸 사로 잡고 { Component, PropTypes }으로부터 구성원을 'react'모듈에 할당 Component하고 PropTypes각각. React모듈의 default내보내기와 같습니다.

아래 torazaburo에 의해 지적 된 바와 같이 , 이것은

import { default as React, Component, PropTypes } from 'react'

이것은 속기입니다

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

다음은 또 다른 예입니다 ( gist 링크 ).

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

---

babel을 사용하여 두 번째 예를 테스트했습니다.

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

구문 오류가 발생했습니다.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

---

참고 import로 MDN 에서 새 문서를 읽을 수 있습니다 . 그러나 분명히 기술 검토가 필요합니다. Axel Rauschmayer의 블로그 게시물 은 현재 더 나은 참조입니다.

참고 URL : https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax