Bagaimana saya bisa mengimpor modul ES6 secara kondisional?

Saya perlu melakukan sesuatu seperti:

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

Kode di atas tidak dikompilasi; itu melempar SyntaxError: ... 'import' and 'export' may only appear at the top level.

Saya mencoba menggunakan System.importseperti yang ditunjukkan di sini , tetapi saya tidak tahu dari mana Systemasalnya. Apakah ini proposal ES6 yang akhirnya tidak diterima? Tautan ke "API terprogram" dari artikel itu mencampakkan saya ke laman dokumen yang tidak digunakan lagi .

Kami memiliki proposal impor dinamis sekarang dengan ECMA. Ini dalam tahap 3. Ini juga tersedia sebagai babel-preset .

Mengikuti adalah cara untuk melakukan rendering bersyarat sesuai kasus Anda.

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

Ini pada dasarnya mengembalikan janji. Resolusi janji diharapkan memiliki modul. Proposal juga memiliki fitur lain seperti beberapa impor dinamis, impor default, impor file js dll. Anda dapat menemukan informasi lebih lanjut tentang impor dinamis di sini .

Jika mau, Anda bisa menggunakan persyaratan. Ini adalah cara untuk memiliki pernyataan persyaratan bersyarat.

let something = null;
let other = null;

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

Anda tidak dapat mengimpor secara kondisional, tetapi Anda dapat melakukan yang sebaliknya: mengekspor sesuatu secara kondisional. Itu tergantung pada kasus penggunaan Anda, jadi penyelesaian ini mungkin bukan untuk Anda.

Anda dapat melakukan:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

Saya menggunakannya untuk mengejek lib analytics seperti mixpanel, dll ... karena saya tidak dapat memiliki beberapa build atau frontend kami saat ini. Bukan yang paling elegan, tetapi bekerja. Saya hanya punya beberapa 'jika' di sana-sini tergantung pada lingkungan karena dalam kasus mixpanel, perlu inisialisasi.

Sepertinya jawabannya adalah, sampai sekarang, Anda tidak bisa.

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

Saya pikir maksudnya adalah untuk memungkinkan analisis statis sebanyak mungkin, dan modul yang diimpor dengan syarat mematahkannya. Juga layak disebutkan - Saya menggunakan Babel , dan saya rasa itu Systemtidak didukung oleh Babel karena API pemuat modul tidak menjadi standar ES6.

require()adalah cara untuk mengimpor beberapa modul pada waktu berjalan dan sama-sama memenuhi syarat untuk analisis statis seperti importjika digunakan dengan jalur literal string. Ini diperlukan oleh bundler untuk memilih dependensi untuk bundel.

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

Untuk resolusi modul dinamis dengan dukungan analisis statis lengkap, modul indeks pertama dalam pengindeks (index.js) dan pengindeks impor dalam modul host.

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

Perbedaan penting jika Anda menggunakan mode impor dinamis 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(...);
}

mengaburkannya dalam eval bekerja untuk saya, menyembunyikannya dari analisa statis ...

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

Saya dapat mencapai ini menggunakan fungsi yang dipanggil langsung dan memerlukan pernyataan.

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

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

Impor bersyarat juga dapat dicapai dengan terner dan require()s:

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

Contoh ini diambil dari ES Lint global-membutuhkan dokumen: https://eslint.org/docs/rules/global-require

Lihat contoh ini untuk pemahaman yang jelas tentang cara kerja impor dinamis.

Modul Impor Contoh Dinamis

Untuk memiliki Pengertian Dasar tentang mengimpor dan mengekspor Modul.

Modul JavaScript Github

Modul Javascript MDN

Tidak bisa!

Namun, setelah menabrak masalah itu harus membuat Anda memikirkan kembali bagaimana Anda mengatur kode Anda.

Sebelum modul ES6, kami memiliki modul CommonJS yang menggunakan sintaks memerlukan (). Modul-modul ini "dinamis", artinya kita dapat mengimpor modul baru berdasarkan kondisi dalam kode kita. - sumber: https://bitsofco.de/what-is-tree-shaking/

Saya kira salah satu alasan mereka menjatuhkan dukungan pada ES6 dan seterusnya adalah fakta bahwa kompilasi akan sangat sulit atau tidak mungkin.