有没有办法用 ESModule 延迟导出文件？

Question

我有一个项目有很多文件要导出。现在我使用 CommonJS 来延迟导出这些文件：

module.exports = {
  get AccessibilityInfo() {
    return require('../Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator() {
    return require('../Components/ActivityIndicator/ActivityIndicator');
  },
  // .... many other files 
 }

ReactNative 做同样的事情React Native，这样一个文件只有在专门导入时才会加载。

我想用ESModule重构这个文件，但是我找不到懒惰导出文件的方法。
有没有办法用 ESModule 懒惰地导出文件？
有必要用ESModule 懒惰导出文件吗？

Answer 1

ECMAScript 执行此操作的方法是通过 dynamic import()。语法基本上是一样的，它做你所期望的，除了它返回一个承诺（这很好 - 这意味着该操作不会锁定线程）。您的代码可能如下所示：

export const getAccessibilityInfo = () =>
  import("../Components/AccessibilityInfo/AccessibilityInfo");

export const getActivityIndicator = () =>
  import("../Components/ActivityIndicator/ActivityIndicator");

然后你会像这样获取这些模块：

import { getActivityIndicator } from "./the/module/above";

const ActivityIndicatorPromise = getActivityIndicator();

// Whenever you need to use the ActivityIdicator module, you first need to await for the promise resolution

ActivityIndicatorPromise.then(ActivityIndicatorModule => {
  // Do what you want here...
});

您可以在此处阅读更多相关信息：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports。它还列出了这种语法更可取的情况。如果您希望使用静态导入语法 ( import X from '../whatever';)可以做到这一点，请放心 - 事实并非如此。