有条件地加载 JS 模块 (SystemJS)

Question

我目前正在使用 jspm 和 SystemJS 加载 ES6 模块。但是，我希望能够

扫描特定选择器的页面（例如，id、data-plugin）
将这些选择器映射到它们的模块依赖项
只加载那些模块

我的想法是通过可以访问 document 的单一入口点 System.import('src/main') 来处理这些导入。然后我可以找到相关的选择器，将这些选择器映射到模块，然后 import 那些模块。

src/main 看起来像这样：

['d3', 'jquery'].forEach(function(dependency) {
    import dependency;
});

这不是一个可行的解决方案，因为它是无效的语法。在这个意义上有没有更好的方法来实现动态模块加载？

Answer 1

普通 import 语法不能用于有条件地加载模块，如您所见。为了解决这个问题，我们可以使用 System 提供的程序化 API。您已经熟悉此 API，因为您将它用于 System.import('src/main');.

要有条件地加载模块，而不是使用 import 关键字，您只需要继续使用 System.import 方法。

这方面的一个例子：

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
</head>
<body>
  <div id='one'>One</div>
  <div>Two</div>

  <script>
    System.import('main');
  </script>
</body>
</html>

main.js

const map = {
  '#one': 'one',
  '#two': 'two'
};

for (let selector in map) {
  if (document.querySelector(selector)) {
    System.import(map[selector]);
  }
}

one.js

window.HAS_ONE = true;

two.js

window.HAS_TWO = true;

在此示例中，将定义 window.HAS_ONE，但 window.HAS_TWO 将保留 undefined。

有条件地加载 JS 模块 (SystemJS)

Load JS modules conditionally (SystemJS)

javascript

systemjs

jspm

index.html

main.js

one.js

two.js