System.import 异步模块加载与脚本标签同步加载冲突
System.import async module loading conflicts with scripts tags sync loading
我开始使用带有 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 加载完 App 代码后,您将如何加载脚本?
对于生产我对此没有问题,因为我会将所有文件连接在一个 js 模块中并使用 System.import 加载该模块,但这将是调试的噩梦,我更愿意单独加载文件。
有什么想法吗?谢谢!
使用 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 导入语法并避免使用全局变量。
我开始使用带有 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 加载完 App 代码后,您将如何加载脚本?
对于生产我对此没有问题,因为我会将所有文件连接在一个 js 模块中并使用 System.import 加载该模块,但这将是调试的噩梦,我更愿意单独加载文件。
有什么想法吗?谢谢!
使用 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 导入语法并避免使用全局变量。