Question

我开始使用带有atom / electron的JSPM来移植我使用Marionette构建的网站。

我的所有应用程序都是围绕Marionette模块编写的，所以我想在启动应用程序之前加载所有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()的异步性问题。 System.import加载应用程序代码后，如何加载脚本？

对于生产我对此没有任何问题，因为我会连接单个js模块中的所有文件以及使用System.import加载该模块，但这将是调试的噩梦，我更愿意拥有这些文件单独装。

有什么想法？谢谢！

Answer 1

使用ES6模块时，全局变量是绝对不可能的。

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

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的用途是什么。因此，真正的解决方案是将所有模块转换为ES6导入语法并避免全局变量。

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

1 个答案: