Як я можу умовно імпортувати модуль 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. Це також доступно у вигляді попередньо встановленої ватаги .

Далі - спосіб зробити умовне відображення відповідно до вашого випадку.

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

Це в основному повертає обіцянку. Очікується, що модуль буде мати дозвіл. Пропозиція також має інші функції, такі як багаторазовий динамічний імпорт, імпорт за замовчуванням, імпорт файлів js тощо. Ви можете знайти більше інформації про динамічний імпорт тут .

Якщо ви хочете, ви можете використовувати вимагати. Це спосіб мати умовне твердження про вимогу.

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, і т. Д. ... тому що в даний час я не можу мати декілька збірок або наш інтерфейс. Не найелегантніший, але працює. У мене просто кілька "if" тут і там, залежно від середовища, оскільки у випадку mixpanel вона потребує ініціалізації.

Схоже, відповідь полягає в тому, що, як і зараз, ви не можете.

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

Я думаю, що намір полягає в тому, щоб максимально включити статичний аналіз, і умовно імпортні модулі це порушують. Також варто згадати - я використовую Babel , і я припускаю, що SystemBabel не підтримується, оскільки 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()s:

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

Цей приклад узятий із документів ES Lint global-requ: https://eslint.org/docs/rules/global-require

Подивіться на цей приклад для чіткого розуміння того, як працює динамічний імпорт.

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

Мати базове розуміння імпорту та експорту модулів.

Модулі JavaScript Github

Модулі Javascript MDN

Ні, ви не можете!

Однак, наткнувшись на цю проблему, ви повинні змусити переосмислити, як ви впорядковуєте свій код.

Перед модулями ES6 у нас були модулі CommonJS, які використовували синтаксис requ (). Ці модулі були "динамічними", це означає, що ми могли імпортувати нові модулі на основі умов у нашому коді. - джерело: https://bitsofco.de/what-is-tree-shaking/

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