ES6 모듈을 조건부로 가져 오려면 어떻게해야합니까?

나는 다음과 같은 일을해야합니다 :

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

위의 코드는 컴파일되지 않습니다. 던졌습니다 SyntaxError: ... 'import' and 'export' may only appear at the top level.

여기 에 System.import표시된대로 사용하려고했지만 어디서 왔는지 모르겠습니다 . ES6 제안은 결국 받아 들여지지 않았습니까? 이 기사의 "프로그래밍 API"링크는 더 이상 사용되지 않는 문서 페이지로 덤프 합니다 .System

이제 ECMA와 함께 동적 수입 제안이 있습니다. 3 단계 입니다. babel-preset 으로도 제공됩니다 .

다음은 귀하의 경우에 따라 조건부 렌더링을 수행하는 방법입니다.

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

이것은 기본적으로 약속을 반환합니다. 약속의 해결은 모듈을 가질 것으로 예상됩니다. 제안서에는 여러 동적 가져 오기, 기본 가져 오기, js 파일 가져 오기 등과 같은 다른 기능도 있습니다 . 동적 가져 오기 에 대한 자세한 정보는 여기를 참조하십시오 .

원하는 경우 require를 사용할 수 있습니다. 이것은 조건부 require 문을 갖는 방법입니다.

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

조건부로 가져올 수는 없지만 반대로 할 수 있습니다. 조건부로 무언가를 내 보냅니다. 사용 사례에 따라 다르므로이 해결 방법이 적합하지 않을 수 있습니다.

넌 할 수있어:

api.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

나는 현재 다중 빌드 또는 프론트 엔드를 가질 수 없기 때문에 mixpanel 등과 같은 분석 라이브러리를 조롱하는 데 사용합니다. 가장 우아하지는 않지만 작동합니다. mixpanel의 경우 초기화가 필요하기 때문에 환경에 따라 여기에 몇 가지 'if'가 있습니다.

대답은 현재로서는 할 수없는 것 같습니다.

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

정적 분석을 가능한 한 많이하는 것이 목적이며 조건부로 가져온 모듈이이를 깨뜨립니다. 또한 언급 할만큼 가치 - 내가 사용하고 바벨을 , 나는 그 추측하고있어 System모듈 로더 API는 ES6 표준이 없었기 때문에 바벨을 지원하지 않습니다.

require()런타임에 일부 모듈을 가져 오는 방법 import이며 문자열 리터럴 경로와 함께 사용하는 경우와 같이 정적 분석에 동일하게 적합 합니다. 번 들러는 번들에 대한 종속성을 선택해야합니다.

const defaultOne = require('path/to/component').default;
const NamedOne = require('path/to/component').theName;

완전한 정적 분석을 지원하는 동적 모듈 확인을 위해 인덱서 (index.js)의 첫 번째 인덱스 모듈과 호스트 모듈의 인덱서 가져 오기.

// index.js
export { default as ModuleOne } from 'path/to/module/one';
export { default as ModuleTwo } from 'path/to/module/two';
export { SomeNamedModule } from 'path/to/named/module';

// host.js
import * as indexer from 'index';
const moduleName = 'ModuleOne';
const Module = require(indexer[moduleName]);

동적 가져 오기 웹팩 모드를 사용하는 경우 중요한 차이점 eager:

if (normalCondition) {
  // this will be included to bundle, whether you use it or not
  import(...);
}

if (process.env.SOMETHING === 'true') {
  // this will not be included to bundle, if SOMETHING is not 'true'
  import(...);
}

평가판에서 그것을 가리면 정적 분석기에서 숨겨져 나를 위해 일했습니다 ...

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

즉시 호출 된 함수를 사용 하여이 작업을 수행 할 수 있었고 명령문을 요구했습니다.

const something = (() => (
  condition ? require('something') : null
))();

if(something) {
  something.doStuff();
}

조건부 수입은 3 항과 require()s 로도 달성 할 수 있습니다 .

const logger = DEBUG ? require('dev-logger') : require('logger');

이 예제는 ES Lint 글로벌 필수 문서에서 가져온 것입니다 : https://eslint.org/docs/rules/global-require

동적 가져 오기의 작동 방식을 명확하게 이해하려면이 예제를 살펴보십시오.

동적 모듈 가져 오기 예

모듈 가져 오기 및 내보내기에 대한 기본 이해.

자바 스크립트 모듈 Github

자바 스크립트 모듈 MDN

아니, 안돼!

그러나이 문제에 부딪 치면 코드 구성 방법을 다시 생각해야합니다.

ES6 모듈 이전에는 require () 구문을 사용하는 CommonJS 모듈이있었습니다. 이러한 모듈은 "동적"이므로 코드의 조건에 따라 새 모듈을 가져올 수 있습니다. -출처 : https://bitsofco.de/what-is-tree-shaking/

ES6에서 지원을 중단 한 이유 중 하나는 컴파일이 매우 어렵거나 불가능하다는 것입니다.