从需求到systemjs:管理路径

Question

我正在迁移到systemjs的过程中，主要是因为它支持模块，这使得迁移到ES6更简单。

systemjs CSS插件允许这样优雅的导入:

System.import('bootstrap/css/bootstrap.css!');

但是这是异步加载的，所以对于需要在服务器生成页面的其余部分之前加载CSS是不实用的。所以我不得不使用繁琐的包url。(当版本改变时，它会中断——而且似乎通常很糟糕——因为JSPM应该管理这些细节?)

<link rel="stylesheet" href="/res/packages/github/twbs/bootstrap@3.3.5/css/bootstrap.css">

是否有最佳实践?实际上，systemjs的实际应用有什么有用的例子吗?

Answer 1

你可以隐藏主体，创建一个javascript模块来加载你的资源，并在资源加载后显示主体:

assets.js

import 'bootstrap/css/bootstrap.css!';

然后在index.html文件中:

System.import('assets.js').then(function(){
   //Now your styles are loaded. You may fade in/display your content.
   document.querySelector('body').style.display = 'block';
}); //Add the JS extension according to your SystemJS configuration