Question

在查看jspm和SystemJS文档和示例时，似乎许多用例仅适用于为单页应用程序捆绑JavaScript。这意味着只需要一个或几个预设的捆绑包即可。

使用案例：多页网站

我希望将ES2015模块和语法整合到一个大型多页面网站中，该网站的页面具有一系列不同的依赖关系。

对于每个页面请求，我想收集HTML属性列表，确定这些属性的相应模块，并创建一个包含仅页面所需的特定依赖项的包。

其中一些页面可能需要jquery，而其他页面可能需要d3。单一入口点变得没有实际意义，因为入口点可能会因页面所需的模块而异。

它足以直接收集页面所需的模块列表，但对于我如何动态生成具有大量可能依赖项的捆绑文件并不是很明显。我已多次阅读jspm docs，但发现它缺少一些实际示例，这些示例可能（或可能不）对我的特定实现至关重要（例如，depCache，bundle- SFX）。

捆绑生产

我尝试捆绑生产所需的特定模块，首先使用System.import()加载我需要加载的所有模块的列表，然后使用then回调中的promise进行导入仅限于那些特定模块。

的index.html

<script>
  System.import('/src/js/initr.config.js').then(function(m) {
    m.modulesToImport.forEach(function(m) {
        return System.import(m);
    });
  });
</script>

这似乎在开发期间加载了所需的依赖树。我将此作为index.html的一部分包括在内，它似乎适用于开发模式。

但是，如果我从index.html删除这段代码并将其放入我的＆＃34;入口点＆＃34; （src/main）并运行jspm bundle src/main.js public/bundle.js，我的捆绑包只包含以下导入语句：

公开/ bundle.js

System.registerDynamic("src/main.js", [], false, function($__require, $__exports, $__module) {
  var _retrieveGlobal = System.get("@@global-helpers").prepareGlobal($__module.id, null, null);
  (function() {
    System.import('/src/js/initr.config.js').then(function(m) {
      m.modulesToImport.forEach(function(m) {
        return System.import(m);
      });
    });
  })();
  return _retrieveGlobal();
});

显然，这个包没有充分编译我的代码，因为它只包含src/main的内容，而不是从内部导入的模块。

这向我表明我的入口点必须包含es2015，commonjs等import语句，而不仅仅是System.import()。但是这些模块import语句确实支持动态加载。更具体地说，如果我将上面的System.import(m)替换为import m，则该文件会出错。

提出一个奇怪而尖锐的问题：

jspm或SystemJS是否可以在多页网站上为大量模块组合创建动态生成的捆绑包？由于这些捆绑包可能包含数百个与DOM元素相关的不同模块组合，因此无法预设或预先确定这些捆绑包。

如果有帮助，您可以查看此项目的repo。

使用jspm和SystemJS基于DOM元素捆绑模块

使用案例：多页网站

捆绑生产

0 个答案: