*를 'React'에서 React로 Import하고, vs 'React'에서 React를 Import한다.

*를 'React'에서 React로 Import하고, vs 'React'에서 React를 Import한다.

눈치 챘다React는 다음과 같이 Import 할 수 있습니다.

import * as React from 'react';

...혹은 다음과 같습니다.

import React from 'react';

---

첫 번째는 모든 것을 Import합니다.reactmodule( 참조: 모듈의 내용 전체를 Import합니다.

두 번째가 Import하는 것은default모듈 내보내기(「Importing defaults」 참조)

---

두 가지 접근 방식이 서로 다르며 근본적으로 호환되지 않는 것 같습니다.

왜 둘 다 작동할까요?

---

소스 코드를 참조하여 메커니즘을 설명하십시오.저는 이것이 어떻게 작동하는지 알고 싶습니다.

---

갱신하다

이는 'react'에서 반응하는 Import*와 'react'에서 반응하는 Import 반응의 차이점이 아닙니다.

이 질문에 대한 답변은 일반적인 ES6 모듈 정보로 이루어졌습니다.

저는 이 모든 것을 가능하게 하는 메커니즘에 대해 묻고 있습니다.react모듈은 다음과 같이 동작합니다.여기에서는 소스의 "해키한" 내보내기 메커니즘과 관련이 있는 것으로 보이지만 모듈 전체 Import와 디폴트 내보내기 둘 다 어떻게 활성화 되는지는 명확하지 않습니다.React이 두 가지 접근 방식을 모두 JSX 변환 등과 함께 사용할 수 있습니다.

TL;DR

실제로 ES 수입 명세서import default그리고.import *동일하지 않습니다.이 경우 동작은 동일합니다.이는 리액트 작성자가 라이브러리와 호환성 계층을 TypeScript에 게시하는 방법을 조합한 것입니다(사용).esModuleInterop또는 바벨과 당신의 번들러를 "그냥 일"하게 만들 수도 있습니다.ES6 사양으로는 동작하지 않을지도 모릅니다만, JS모듈이 엉망인 시대이기 때문에 Babel, TypeScript, Webpack 등의 툴이 동작을 정상화하려고 합니다.

상세:

React는 ES6 라이브러리가 아닙니다.소스코드를 참조해 주세요.index.js:

const React = require('./src/React');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

(React 소스 코드에서도 ES6 기본 내보내기 호환성에 어려움을 겪고 있다는 점에 유의하십시오).

그module.exports =구문은 CommonJS(NodeJS)입니다.브라우저는 이를 인식하지 못합니다.그래서 우리는 웹팩, 롤업, 소포와 같은 번들을 사용합니다.이들은 모든 종류의 모듈 구문을 이해하고 브라우저에서 동작하는 번들을 생성합니다.

그러나 React는 ES 라이브러리가 아니지만 TypeScript와 Babel을 모두 사용하여 그대로 Import할 수 있습니다(사용).import구문, 대신require()CJS와 ES 사이에는 해결해야 할 차이점이 있다.그 중 하나는 이라는 사실이다.export = 는 ES에 대해 사양에 준거한 Import 방법을 제공하지 않습니다.예를 들어 모듈로서의 함수나 클래스입니다.이러한 비호환성 문제를 해결하기 위해 Babel에서는 CJS 모듈을 기본적으로 내보내듯이 Import하거나 네임스페이스로 Import할 수 있습니다.한동안 TypeScript는 이 기능을 하지 않았지만, 최근에는 이 기능을 옵션으로 추가했습니다.esModuleInteropBabel TypeScript type를ES Import 、CJS Import 、 Import 。

또한 TypeScript에서는 라이브러리의 유형 정의가 실제로 어떻게 정의되어 있는지에 따라 달라집니다.자세한 내용은 설명하지 않겠습니다만, 트랜스필러와 번들러 덕분에 런타임에 특정 Import가 동작하지만 TypeScript는 오류 없이 컴파일되지 않는 상황을 상상할 수 있습니다.

React의 빌드 코드를 보면 CJS 버전뿐만 아니라 UMD 모듈 버전도 있습니다.UMD 버전에는 브라우저를 포함한 모든 모듈 환경에서 작동하도록 하기 위한 몇 가지 gnarly 런타임 코드가 포함되어 있습니다.주로 런타임에 React만 포함시키고 싶은 경우(번들러를 사용하지 않는 경우)에 사용합니다.예.

헷갈려요?그래, 그럴 거예요.:)

'''가 있을 거예요''''"allowSyntheticDefaultImports": true,tsconfig.json컴파일러가 무효라고 생각되는 디폴트 Import에 대해 기본적으로 셧다운됩니다.가 추가되었습니다.esModuleInterop바벨라

이를 통해 Import하는 소스 코드가 기본값으로 내보내지 않는 경우에도 ES6 기본 가져오기를 사용할 수 있습니다.

경우 에 () 이 '타자기'를 해야 합니다.import * as React from 'react'또는 기본 설정에서 모의 기본 가져오기를 허용하도록 지시해야 합니다.

자세한 내용은 이쪽

언급URL : https://stackoverflow.com/questions/55285737/import-as-react-from-react-vs-import-react-from-react