Làm thế nào tôi có thể nhập điều kiện một mô-đun ES6?

Tôi cần phải làm một cái gì đó như:

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

Các 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.importnhư hiển thị ở đây , nhưng tôi không biết từ đâu Systemđến. Đây có phải là một đề xuất ES6 cuối cùng không được chấp nhận? Liên kết đến "API lập trình" từ bài viết đó đưa tôi đến trang tài liệu không dùng nữa .

Chúng tôi có đề xuất nhập khẩu năng động ngay bây giờ với ECMA. Đây là trong giai đoạn 3. Điều này cũng có sẵn như babel-preset .

Sau đây là cách để thực hiện kết xuất 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ả lại một lời hứa. Nghị quyết của lời hứa dự kiến ​​sẽ có mô-đun. Đề xuất 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ề nhập động tại đây .

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.

let something = null;
let other = null;

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

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 cái gì đó 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 dành cho 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 điều đó để giả lập các lib phân tích như mixpanel, v.v ... bởi vì hiện tại tôi không thể có nhiều bản dựng hoặc giao diện của chúng tôi. Không phải là thanh lịch nhất, nhưng làm việc. Tôi chỉ có một vài 'nếu' ở đây và ở đó tùy thuộc vào môi trường vì trong trường hợp mixpanel, nó cần khởi tạo.

Có vẻ như câu trả lời là, cho đến bây giờ, 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 mô-đun được nhập có điều kiện phá vỡ điều đó. Cũng đáng đề cập - Tôi đang sử dụng Babel và tôi đoán rằng điều đó Systemkhông được Babel hỗ trợ vì API trình tải mô-đun không trở thành tiêu chuẩn ES6.

require()là một cách để nhập một số mô-đun vào thời gian chạy và nó đủ điều kiện để phân tích tĩnh như importnếu được sử dụng với các đường dẫn theo chuỗi. Điều này được yêu cầu bởi bundler để chọn phụ thuộc cho gói.

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

Để phân giải mô-đun động với hỗ trợ phân tích tĩnh hoàn chỉnh, các mô-đun chỉ mục đầu tiên trong một bộ chỉ mục (index.js) và bộ chỉ mục nhập trong mô-đun máy chủ.

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

Sự khác biệt quan trọng nếu bạn sử dụng chế độ Webpack nhập động 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(...);
}

che khuất nó trong một eval làm việc cho tôi, giấu nó khỏi máy phân tích tĩnh ...

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

Tôi đã có thể đạt được điều này bằng cách sử dụng một hàm được gọi ngay lập tức và yêu cầu câu lệnh.

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

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

Nhập khẩu có điều kiện cũng có thể đạt được với một ternary và require()s:

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

Ví dụ này được lấy từ các tài liệu yêu cầu toàn cầu của ES Lint: https://eslint.org/docs/rules/global-require

Nhìn vào ví dụ này để hiểu rõ về cách hoạt động nhập khẩu động.

Ví dụ nhập khẩu mô-đun động

Để có hiểu biết cơ bản về nhập và xuất các mô-đun.

Mô-đun JavaScript Github

Mô-đun Javascript MDN

Không, bạn không thể!

Tuy nhiên, việc gặp phải vấn đề đó sẽ khiến bạn phải suy nghĩ lại về cách bạn tổ chức mã của mình.

Trước các mô-đun ES6, chúng tôi đã có các mô-đun CommonJS sử dụng cú pháp Yêu cầu (). Các mô-đun này là "động", có nghĩa là chúng tôi có thể nhập các mô-đun mới dựa trên các điều kiện trong mã của chúng tôi. - nguồn: https://bitsofco.de/what-is-tree-shaking/

Tôi đoán một trong những lý do khiến họ bỏ hỗ trợ trên ES6 trở đi là việc biên dịch nó sẽ rất khó hoặc không thể.