ES6 : 조건부 및 동적 가져 오기 문

ES6 : 조건부 및 동적 가져 오기 문

---

가정 어구

아래와 같은 조건부 import 문을 가질 수 있습니까?

if (foo === bar) {
    import Baz from './Baz';
}

위의 방법을 시도했지만 컴파일 할 때 Babel에서 다음 오류가 발생합니다.

'import' and 'export' may only appear at the top level

동적

아래와 같은 동적 import 문을 가질 수 있습니까?

for (let foo in bar) {
    if (bar.hasOwnProperty(foo)) {
        import Baz from `./${foo}`;
    }
}

위의 내용은 컴파일하는 동안 Babel에서 동일한 오류를 수신합니다.

이것이 가능합니까 아니면 내가 놓친 것이 있습니까?

추리

내가 이것을하려는 이유는 여러 "페이지"에 대해 많은 가져 오기가 있고 비슷한 패턴을 따르기 때문입니다. 동적 for 루프로 이러한 파일을 가져 와서 코드베이스를 정리하고 싶습니다.

이것이 가능하지 않다면 ES6에서 많은 수의 가져 오기를 처리하는 더 좋은 방법이 있습니까?

---

우리는 이제 ECMA와 함께 동적 수입 제안을 가지고 있습니다. 이것은 2 단계에 있습니다. 이것은 babel-preset 으로도 사용할 수 있습니다 .

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

if (foo === bar) {
    import('./Baz')
    .then((Baz) => {
       console.log(Baz.Baz);
    });
}

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

---

imports정적 분석을위한 것처럼 종속성을 동적으로 해결할 수 없습니다 . 그러나 require다음과 같이 여기에서 사용할 수 있습니다 .

for (let foo in bar) {
    if (bar.hasOwnProperty(foo)) {
        const Baz = require(foo).Baz;
    }
}

---

Require는 동기 호출이므로 문제를 해결하지 못합니다. 몇 가지 옵션이 있으며 모두 포함됩니다.

1. 필요한 모듈 요청
2. 모듈 반환 약속을 기다리는 중

ECMA 스크립트에는 SystemJS를 사용하는 지연로드 모듈에 대한 지원이 있습니다. 물론 이것은 모든 브라우저에서 지원되는 것은 아니므로 그 동안 JSPM 또는 SystemJS shim을 사용할 수 있습니다.

https://github.com/ModuleLoader/es6-module-loader

참고 URL : https://stackoverflow.com/questions/35914712/es6-conditional-dynamic-import-statements