ES6モジュールを条件付きでインポートするにはどうすればよいですか？

Question

は、私のような何かをする必要があります。

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

上記のコードはコンパイルされません。それはSyntaxError: ... 'import' and 'export' may only appear at the top levelを投げる。

hereのように私はSystem.importを使ってみましたが、Systemがどこに由来しているのか分かりません。それは受け入れられることに終わらなかったES6の提案ですか？その記事の「プログラムAPI」へのリンクは、deprecated docs pageにダンプします。答えは今のところ、あなたができない、ということであるように

Answer 1

ECMAを使用した動的なインポート提案があります。これはステージ3にあります。これはbabel-presetとしても入手可能です。

以下は、ケースごとに条件付きレンダリングを行う方法です。

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

これは基本的に約束を返します。約束の解決は、モジュールを持つことが期待されます。提案には、複数の動的インポート、デフォルトのインポート、jsファイルのインポートなどの他の機能もあります。dynamic imports hereの詳細については、こちらをご覧ください。 evalの中でそれを曖昧

Answer 2

が見えます。

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

私は意図が可能な限り、条件付きインポートモジュールがそれを破るような静的解析を可能にするためだと思います。また、言及する価値 - 私はBabelを使用している、と私はモジュールローダのAPIがES6標準となっていなかったのでSystemがバベルでサポートされていないことを推測しています。あなたが希望した場合

Answer 3

、あなたが必要と使用することができます。これは、条件付き要求ステートメントを持つ方法です。

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

Answer 4

条件付きでインポートすることはできませんが、反対に行うことができます：条件付きで何かをエクスポートします。それはあなたのユースケースに依存するので、この回避策はあなたのためではないかもしれません。

あなたは行うことができます。

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、のようなLIBS ...「私ができるので、現在複数のビルドやフロントエンドがあります。最もエレガントではありませんが、機能します。 mixpanelの場合、初期化が必要なので、環境に応じて、ここではいくつかの 'if'があります。

Answer 5

は静的アナライザからそれを隠して、私のために働いた...

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