Jak mogę warunkowo zaimportować moduł ES6?

Muszę zrobić coś takiego:

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

Powyższy kod się nie kompiluje; rzucaSyntaxError: ... 'import' and 'export' may only appear at the top level .

Próbowałem używać, System.importjak pokazano tutaj , ale nie wiem, skąd Systempochodzi. Czy to propozycja ES6, która nie została zaakceptowana? Link do „programowego interfejsu API” z tego artykułu zrzuca mnie na przestarzałą stronę z dokumentami .

Mamy teraz dynamiczną propozycję importu z ECMA. Jest to etap 3. Jest to również dostępne jako preset babel .

Poniżej przedstawiono sposób renderowania warunkowego zgodnie z Twoim przypadkiem.

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

To w zasadzie zwraca obietnicę. Oczekuje się, że rozwiązanie obietnicy będzie mieć moduł. Propozycja ma również inne funkcje, takie jak import dynamiczny, import domyślny, import pliku js itp. Więcej informacji na temat importu dynamicznego można znaleźć tutaj .

Jeśli chcesz, możesz użyć wymagania. Jest to sposób na warunkowe żądanie warunkowe.

let something = null;
let other = null;

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

Nie możesz importować warunkowo, ale możesz zrobić odwrotnie: eksportuj coś warunkowo. To zależy od przypadku użycia, więc obejście tego problemu może nie być dla Ciebie.

Możesz to zrobić:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Używam tego, by wyśmiewać biblioteki analityczne, takie jak mixpanel itp., Ponieważ nie mogę obecnie mieć wielu kompilacji ani naszego frontendu. Nie najbardziej elegancki, ale działa. Mam tylko kilka „jeśli” tu i tam, w zależności od środowiska, ponieważ w przypadku mixpanelu wymaga inicjalizacji.

Wygląda na to, że odpowiedź jest taka, że ​​na razie nie możesz.

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

Myślę, że naszym celem jest możliwie jak największa analiza statyczna, a importowane warunkowo moduły to psują. Warto również wspomnieć - używam Babel i zgaduję, że Systemnie jest obsługiwany przez Babel, ponieważ interfejs API modułu ładującego nie stał się standardem ES6.

require()jest sposobem na zaimportowanie jakiegoś modułu w czasie wykonywania i w równym stopniu kwalifikuje się do analizy statycznej, jak w importprzypadku użycia ze ścieżkami literału łańcucha. Jest to wymagane przez pakiet do wybrania zależności dla pakietu.

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

Aby uzyskać dynamiczne rozwiązanie modułu z pełną obsługą analizy statycznej, najpierw moduły indeksujące w module indeksującym (index.js) i importuj moduł indeksujący w module hosta.

// 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]);

Ważna różnica w przypadku korzystania z trybu importu dynamicznego Webpack 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(...);
}

przesłanianie go w eval zadziałało dla mnie, ukrywając go przed analizatorem statycznym ...

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

Udało mi się to osiągnąć za pomocą natychmiastowo wywołanej funkcji i wymagają instrukcji.

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

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

Import warunkowy można również osiągnąć za pomocą trójki i require()s:

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

Ten przykład został zaczerpnięty z dokumentów globalnych wymagających ES Lint: https://eslint.org/docs/rules/global-require

Spójrz na ten przykład, aby zrozumieć, jak działa import dynamiczny.

Przykład importu modułu dynamicznego

Podstawowa znajomość importowania i eksportowania modułów.

Moduły JavaScript Github

Moduły JavaScript MDN

Nie, nie możesz!

Jednak wpadnięcie na ten problem powinno sprawić, że ponownie przemyślisz sposób organizacji kodu.

Przed modułami ES6 mieliśmy moduły CommonJS, które używały składni wymaganej (). Te moduły były „dynamiczne”, co oznacza, że ​​mogliśmy importować nowe moduły w oparciu o warunki w naszym kodzie. - źródło: https://bitsofco.de/what-is-tree-shaking/

Wydaje mi się, że jednym z powodów, dla których porzucili tę obsługę ES6, jest fakt, że skompilowanie jej byłoby bardzo trudne lub niemożliwe.