자바 스크립트 가져 오기 구문에 대괄호 사용
라이브러리를 가져 오기 위해 다음 구문을 사용하는 자바 스크립트 라이브러리를 발견했습니다.
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
'Programming' 카테고리의 다른 글
오류 메시지 엄격한 표준 : PHP에서 비 정적 메소드를 정적으로 호출하면 안됩니다 (0) | 2020.08.05 |
---|---|
1,000,000 개의 웹 소켓을 열어두기 위해 몇 개의 시스템 리소스가 보유됩니까? (0) | 2020.08.05 |
TypeScript 프로젝트에서 기존 C # 클래스 정의를 재사용하는 방법 (0) | 2020.08.05 |
Swift에서 명령 행 인수에 어떻게 액세스합니까? (0) | 2020.08.04 |
SQLAlchemy 행 항목을 업데이트하는 방법? (0) | 2020.08.04 |