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-presetとしても利用できます。

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

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

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

必要に応じて、requireを使用できます。これは、条件付きの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'
...

現在、ミックスパネルなどの分析ライブラリのモックに使用しています。現在、複数のビルドやフロントエンドを使用することはできないためです。最もエレガントではありませんが、動作します。ミックスパネルの場合は初期化が必要なので、環境に応じてあちこちにいくつかの「if」があります。

答えは今のところできないということです。

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

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

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');")
}

これは、すぐに呼び出される関数とrequireステートメントを使用して実現できました。

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

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

条件付きインポートは、3項とrequire()s でも実現できます。

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

この例は、ES Lintのglobal-requireドキュメントから取得されました。https：//eslint.org/docs/rules/global-require

動的インポートのしくみを明確に理解するには、この例をご覧ください。

動的モジュールのインポートの例

モジュールのインポートとエクスポートの基本を理解する。

JavaScriptモジュールGithub

JavaScriptモジュールMDN

いいえ、できません！

ただし、その問題にぶつかったことで、コードの編成方法を再考する必要があります。

ES6モジュールの前は、require（）構文を使用するCommonJSモジュールがありました。これらのモジュールは「動的」でした。つまり、コードの条件に基づいて新しいモジュールをインポートできました。-ソース：https : //bitsofco.de/what-is-tree-shaking/

彼らがES6以降のサポートを中止した理由の1つは、コンパイルが非常に困難または不可能であるという事実だと思います。