System.importasynchronous模块加载冲突与脚本标记同步加载

我开始使用primefaces/电子的JSPM来移植我用Marionette构build的网站。

我有我所有的应用程序写的木偶模块，所以我想在启动应用程序之前加载所有JavasSript文件。

<script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> loadApp = System.import('./scripts/app_definition').then(function(m){ window.App = m['App']; }); </script> <!-- inject:js --> ##LOTS INJECTED SCRIPTS THAT NEEDS window.App to be defined## <script src="compiled/modules/video/video_app.js"></script> <!-- endinject --> <script type="text/javascript"> loadApp.then(function(){ App.start(); }) </script> 

我遇到了System.import()的asynchronous性质问题。 在System.import加载完App代码后，你将如何加载脚本？

对于生产我没有问题，因为我会连接在一个单一的JS模块中的所有文件，并加载该模块使用System.import，但这将是一个噩梦debugging，我宁愿有文件加载单独。

有什么想法吗？ 谢谢！

Answer 1

使用ES6模块时，全局variables是不容忽视的。

您可以在应用程序定义之后加载脚本：

 loadApp = System.import('./scripts/app_definition').then(function(m){ window.App = m['App']; var scriptEl = document.createElement('script'); scriptEl.src = "compiled/modules/video/video_app.js"; document.head.appendChild(scriptEl); }); 

但是我不确定在这里首先使用JSPM有什么用处。 所以真正的解决scheme是将所有模块转换为ES6导入语法，并避免全局variables。