Как я могу условно импортировать модуль ES6?

Мне нужно сделать что-то вроде:

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

Приведенный выше код не компилируется; это бросает SyntaxError: ... 'import' and 'export' may only appear at the top level.

Я попытался использовать, System.importкак показано здесь , но я не знаю, откуда System. Это предложение ES6, которое не было принято? Ссылка на «программный API» из этой статьи выводит меня на устаревшую страницу документации .

У нас есть предложение по динамическому импорту с ECMA. Это на этапе 3. Это также доступно как предустановка babel .

Ниже приведен способ сделать условный рендеринг согласно вашему случаю.

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

Это в основном возвращает обещание. Ожидается, что разрешение обещание будет иметь модуль. Предложение также имеет другие функции, такие как множественный динамический импорт, импорт по умолчанию, импорт файлов js и т. Д. Более подробную информацию о динамическом импорте можно найти здесь .

Если вы хотите, вы можете использовать требуют. Это способ создания условного оператора 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, он нуждается в инициализации.

Похоже, ответ в том, что на данный момент вы не можете.

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

Я думаю, что цель состоит в том, чтобы включить статический анализ в максимально возможной степени, и условно импортированные модули ломают это. Также стоит упомянуть - я использую Babel , и я предполагаю, что Systemэто не поддерживается Babel, потому что 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]);

Важное отличие, если вы используете режим динамического импорта 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(...);
}

скрывая это в eval у меня получалось, скрывая это от статического анализатора ...

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

Я смог добиться этого, используя функцию, которая была вызвана немедленно и требовал утверждения.

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

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

Условный импорт также может быть достигнут с тройной и require()с:

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

Этот пример взят из глобальных документов ES Lint: https://eslint.org/docs/rules/global-require

Посмотрите на этот пример, чтобы понять, как работает динамический импорт.

Пример импорта динамического модуля

Иметь базовое понимание импорта и экспорта модулей.

Модули JavaScript Github

Модули Javascript MDN

Нет, ты не можешь!

Однако, столкнувшись с этой проблемой, вы должны переосмыслить порядок организации своего кода.

До модулей ES6 у нас были модули CommonJS, которые использовали синтаксис require (). Эти модули были «динамическими», то есть мы могли импортировать новые модули на основе условий в нашем коде. - источник: https://bitsofco.de/what-is-tree-shaking/

Я полагаю, что одной из причин, по которой они отказались от поддержки ES6 и далее, является тот факт, что компиляция будет очень трудной или невозможной.