Tôi có thể nhập mô-đun ES6 theo cách có điều kiện như thế nào?

Question

Tôi cần phải làm điều gì đó như:

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

Mã trên không biên dịch; nó ném SyntaxError: ... 'import' and 'export' may only appear at the top level.

Tôi đã thử sử dụng System.import như được hiển thị here, nhưng tôi không biết vị trí của System. Đây có phải là một đề xuất ES6 không được chấp nhận? Liên kết đến "API có lập trình" từ bài viết đó đưa tôi đến một số deprecated docs page.

Answer 1

Hiện tại, chúng tôi có đề xuất nhập động động với ECMA. Đây là trong giai đoạn 3. Điều này cũng có sẵn dưới dạng babel-preset.

Sau đây là cách thực hiện hiển thị có điều kiện theo trường hợp của bạn.

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

Điều này về cơ bản trả về lời hứa. Độ phân giải của lời hứa dự kiến ​​sẽ có các mô-đun. Đề xuất này cũng có các tính năng khác như nhập nhiều động, nhập mặc định, nhập tệp js, v.v. Bạn có thể tìm thêm thông tin về dynamic imports here.

Answer 2

Có vẻ như câu trả lời là, hiện tại, bạn không thể.

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

Tôi nghĩ rằng mục đích là để cho phép phân tích tĩnh càng nhiều càng tốt, và các module điều kiện nhập khẩu phá vỡ đó. Cũng đáng nói đến - Tôi đang sử dụng Babel và tôi đoán rằng Babel không hỗ trợ System vì API trình tải mô-đun không trở thành tiêu chuẩn ES6.

Answer 3

Nếu bạn muốn, bạn có thể sử dụng yêu cầu. Đây là một cách để có một tuyên bố yêu cầu có điều kiện.

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

Answer 4

Bạn không thể nhập có điều kiện, nhưng bạn có thể làm ngược lại: xuất một điều kiện có điều kiện. Nó phụ thuộc vào trường hợp sử dụng của bạn, vì vậy công việc này có thể không phù hợp với bạn.

Bạn có thể làm:

api.js

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

const exportedAPI = shouldUseMock ? mockAPI : realAPI 
export default exportedAPI 

apiConsumer.js

import API from './api' 
... 

tôi sử dụng để phân tích mô hình libs như mixpanel, vv ... bởi vì tôi có thể' t có nhiều bản dựng hoặc giao diện người dùng của chúng tôi hiện tại. Không phải là thanh lịch nhất, nhưng hoạt động. Tôi chỉ có một vài 'nếu' ở đây và có tùy thuộc vào môi trường vì trong trường hợp của mixpanel, nó cần khởi tạo.

Answer 5

che khuất nó trong một eval làm việc cho tôi, ẩn nó từ các phân tích tĩnh ...

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