Bir ES6 modülünü koşullu olarak nasıl alabilirim?

Gibi bir şey yapmam gerekiyor:

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

Yukarıdaki kod derlenmez; atar SyntaxError: ... 'import' and 'export' may only appear at the top level.

BuradaSystem.import gösterildiği gibi kullanmayı denedim ama nereden geldiğini bilmiyorum . Kabul edilmeyen bir ES6 teklifi mi? Bu makaledeki "programlı API" bağlantısı beni kullanımdan kaldırılmış dokümanlar sayfasına götürüyor .System

ECMA ile dinamik ithalat teklifimiz var. Bu 3. aşamadadır. Babil önayarı olarak da mevcuttur .

Aşağıda, durumunuza göre koşullu oluşturma yapmanın yolu verilmiştir.

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

Bu temelde bir söz veriyor. Sözün çözülmesi modülün olması bekleniyor. Teklif ayrıca, birden çok dinamik içe aktarma, varsayılan içe aktarma, js dosyası içe aktarma vb. Gibi başka özelliklere de sahiptir. Dinamik içe aktarma hakkında daha fazla bilgiyi burada bulabilirsiniz .

İsterseniz, Require kullanabilirsiniz. Bu, koşullu bir talep ifadesine sahip olmanın bir yoludur.

let something = null;
let other = null;

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

Koşullu olarak içe aktaramazsınız, ancak tam tersini yapabilirsiniz: bir şeyi koşullu olarak dışa aktarın. Kullanım durumunuza bağlıdır, bu nedenle bu geçici çözüm sizin için olmayabilir.

Yapabilirsin:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Bunu mixpanel gibi analitik kütüphaneleri alay etmek için kullanıyorum. En zarif değil, ama çalışıyor. Ortama bağlı olarak burada ve orada birkaç 'if' var, çünkü mixpanel durumunda, başlatılması gerekiyor.

Görünüşe göre cevap şu an için yapamıyorsunuz.

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

Niyetin olabildiğince statik analizi mümkün kılmak olduğunu düşünüyorum ve şartlı olarak içe aktarılan modüller bunu kırıyor. Ayrıca bahsetmeye değer - Babel kullanıyorum Systemve modül yükleyici API bir ES6 standardı olmadığından Babel tarafından desteklenmediğini tahmin ediyorum .

require()bir modülü çalışma zamanında içe aktarmanın bir yoludur ve importdizgi değişmez yollarında kullanıldığında olduğu gibi statik analiz için de eşittir . Bu, paketleyici tarafından paket için bağımlılıkları seçmesi için gereklidir.

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

Tam statik analiz desteğiyle dinamik modül çözünürlüğü için, önce bir dizinleyicide (index.js) dizin modüllerini ve ana makine modülünde dizinleyiciyi içe aktarın.

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

Dinamik içe aktarma Webpack modunu kullanıyorsanız önemli fark 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(...);
}

benim için çalışan bir değerlendirmede gizlemek, statik analizörden gizlemek ...

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

Hemen çağrılan bir işlev kullanarak bunu başardım ve ifade gerektirir.

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

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

Koşullu ithalat bir üçlü ve require()s:

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

Bu örnek ES Lint küresel gereksinim belgelerinden alınmıştır: https://eslint.org/docs/rules/global-require

Dinamik içe aktarmanın nasıl çalıştığını net bir şekilde anlamak için bu örneğe bakın.

Dinamik Modül İçe Aktarma Örneği

Modüllerin ithalat ve ihracatında temel bilgilere sahip olmak.

JavaScript modülleri Github

Javascript Modülleri MDN

Hayır, yapamazsınız!

Ancak, bu sorunla karşılaşmanız, kodunuzu nasıl düzenlediğiniz konusunda yeniden düşünmenizi sağlayacaktır.

ES6 modüllerinden önce, requir () sözdizimini kullanan CommonJS modüllerine sahiptik. Bu modüller "dinamik" dir, yani kodumuzdaki koşullara göre yeni modülleri içe aktarabiliriz. - kaynak: https://bitsofco.de/what-is-tree-shaking/

Sanırım ES6'ya desteğin düşmesinin nedenlerinden biri, bunu derlemenin çok zor veya imkansız olması.