我开始使用带有atom/electron的JSPM来移植我使用木偶构建的网站。
我所有的应用程序都是围绕木偶模块编写的,所以我想在启动应用程序之前加载所有的javascript文件。
<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()
的异步性质的问题。如何加载脚本后系统。App代码导入完成了吗?
对于生产,我对此没有问题,因为我会将所有文件连接到一个js模块中,并使用System加载该模块。导入,但这将是一个噩梦的调试,我宁愿让文件分别加载。
任何想法吗?谢谢!
在使用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导入语法,并避免使用全局变量。