ฉันจะนำเข้าโมดูล 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-ที่ตั้งไว้

ต่อไปนี้เป็นวิธีการแสดงผลตามเงื่อนไขตามกรณีของคุณ

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'
...

ฉันใช้สิ่งนั้นเพื่อเยาะเย้ยการวิเคราะห์ libs เช่นมิกซ์พาเนล ฯลฯ ... เนื่องจากฉันไม่สามารถมีหลายบิลด์หรือส่วนหน้าของเราในขณะนี้ ไม่ใช่แบบหรูหราที่สุด แต่ใช้ได้ผล ฉันมีไม่กี่ 'ถ้า' ที่นี่และที่นั่นขึ้นอยู่กับสภาพแวดล้อมเพราะในกรณีของ mixpanel ก็ต้องเริ่มต้น

ดูเหมือนว่าคำตอบคือ ณ ตอนนี้คุณทำไม่ได้

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

ฉันคิดว่าเจตนาคือการเปิดใช้งานการวิเคราะห์แบบคงที่ให้มากที่สุดและโมดูลที่นำเข้าแบบมีเงื่อนไขจะทำเช่นนั้น ควรพูดถึงอีกด้วย - ฉันใช้Babelและฉันเดาว่าSystemไม่รองรับ Babel เพราะ 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: https://eslint.org/docs/rules/global-require

ดูตัวอย่างนี้เพื่อความเข้าใจที่ชัดเจนว่าการนำเข้าแบบไดนามิกทำงานอย่างไร

ตัวอย่างการนำเข้าโมดูลแบบไดนามิก

มีความเข้าใจพื้นฐานของการนำเข้าและส่งออกโมดูล

โมดูล JavaScript Github

Javascript Modules MDN

ไม่ได้!

อย่างไรก็ตามการชนกับปัญหานั้นจะทำให้คุณคิดใหม่เกี่ยวกับวิธีการจัดระเบียบรหัสของคุณ

ก่อนโมดูล ES6 เรามีโมดูล CommonJS ซึ่งใช้ไวยากรณ์ () โมดูลเหล่านี้เป็น "ไดนามิก" ซึ่งหมายความว่าเราสามารถนำเข้าโมดูลใหม่ตามเงื่อนไขในรหัสของเรา - แหล่งที่มา: https://bitsofco.de/what-is-tree-shaking/

ฉันเดาว่าสาเหตุหนึ่งที่พวกเขาทิ้งการสนับสนุน ES6 เป็นต้นไปนั้นเป็นความจริงที่ว่าการรวบรวมมันจะยากหรือเป็นไปไม่ได้