模块没有按正确的顺序加载

Question

.NET开发者对现代的客户端网络应用程序相当陌生。我正在使用Angular2开发一个Chart.js图表应用程序。模块加载了SystemJS。

这是我的systemjs.config.js：

(function(global)
{
    System.config(
    {
        map:
        {
            "es6-shim": "node_modules/es6-shim",
            "rxjs": "node_modules/rxjs",
            "zone": "node_modules",
            "reflect": "node_modules/reflect-metadata",
            "jquery": "node_modules/jquery/dist",
            "@angular": "node_modules/@angular",
            "@angular/platform-browser": "node_modules/@angular/platform-browser",
            "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic",
            "bootstrap": "node_modules/bootstrap",
            "jasny-bootstrap": "bower_components/jasny-bootstrap",
            "chart.js": "node_modules/chart.js",
            "app_component": "app_modules"
        },
        packages:
        {
            "es6-shim": { main: "es6-shim.min.js" },
            "rxjs": { main: "bundles/Rx.umd.min.js" },
            "zone": { main: "zone.js/dist/zone.min.js" },
            "reflect": { main: "Reflect.js" },
            "jquery": { main: "jquery.min.js" },
            "@angular/core": { main: "bundles/core.umd.min.js" },
            "@angular/common": { main: "bundles/common.umd.min.js" },
            "@angular/compiler": { main: "bundles/compiler.umd.min.js" },
            "@angular/router": { main: "bundles/router.umd.min.js" },
            "@angular/http": { main: "bundles/http.umd.min.js" },
            "@angular/platform-browser": { main: "bundles/platform-browser.umd.min.js" },
            "@angular/platform-browser-dynamic": { main: "bundles/platform-browser-dynamic.umd.min.js" },
            "bootstrap": { main: "dist/js/bootstrap.min.js" },
            "jasny-bootstrap": { main: "dist/js/jasny-bootstrap.min.js" },
            "chart.js": { main: "dist/Chart.bundle.min.js" },
            "app_component": { main: "init.js" }
        },
        meta:
        {
            "bootstrap": { deps: [ "jquery" ] },
            "jasny-bootstrap": { deps: [ "bootstrap" ] }
        }
    });

})(this);

在像这样初始化角模块之前加载了一些必需的组件(主页，index.html)：

<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>

    var load = function(packageName)
    {
        return System.import(packageName)
            .then(function()
            {
                console.log(`Package "${ packageName }" loaded successfully.`);
            })
            .catch(function(error)
            {
                console.error(`Package "${ packageName }" could not be loaded.`, error);
            });
    }

    load("es6-shim")
        .then(load("reflect"))
        .then(load("zone"))
        .then(load("jquery"))
        .then(load("bootstrap"))
        .then(load("jasny-bootstrap"))
        .then(load("chart.js"))
        .then(load("ovafloweb"))
        .catch(function(error)
        {
            console.log("Could not load one or more of the prerequisite components to launch the application.", error)
        });

</script>

这将在控制台中产生以下输出：

Package "es6-shim" loaded successfully.
Package "reflect" loaded successfully.
Package "zone" loaded successfully.
Package "jasny-bootstrap" could not be loaded. Error: (SystemJS) Jasny Bootstrap's JavaScript requires jQuery(…)(anonymous function)
Package "chart.js" loaded successfully.
Package "bootstrap" could not be loaded. Error: (SystemJS) Bootstrap's JavaScript requires jQuery(…)(anonymous function)
Package "jquery" loaded successfully.
Package "ovafloweb" loaded successfully.

所以System.import()回报了一个承诺，对吗？承诺的then()和catch()函数也是这样，对吗？因此，调用then()函数将等待上一次调用结束，然后再继续，对吗？但是，根据控制台输出，jasny-boostrap是在引导之前加载的，该引导程序在jquery之前加载，因此它们都无法加载。更令人困惑的是，加载顺序不一致；有时如下所示：

Package "es6-shim" loaded successfully.
Package "reflect" loaded successfully.
Package "zone" loaded successfully.
Package "jasny-bootstrap" could not be loaded. Error: (SystemJS) Jasny Bootstrap's JavaScript requires jQuery(…)(anonymous function)
Package "jquery" loaded successfully.
Package "bootstrap" loaded successfully.
Package "chart.js" loaded successfully.
Package "ovafloweb" loaded successfully.

有时候看起来是这样的：

Package "es6-shim" loaded successfully.
Package "reflect" loaded successfully.
Package "zone" loaded successfully.
Package "jquery" loaded successfully.
Package "bootstrap" loaded successfully.
Package "jasny-bootstrap" loaded successfully.
Package "chart.js" loaded successfully.
Package "ovafloweb" loaded successfully.

我搜索了几个帖子，建议可以使用meta.package.deps属性告诉SystemJS模块所依赖的是什么，并确保它首先加载，但这并不适用于我。

或者，我可以使用index.html中的<script>标记加载<script>jquery，但我更愿意将它们保持在最低限度--我已经在用<style>标记加载样式表了，我不太喜欢，但是除了webpack之外，我找不到更好的解决方案，到目前为止，对于我的生活，我还没有找到更好的解决方案。目前还没有。

显然我错过了什么，但我不知道是什么。任何和所有的投入都非常感谢。

Answer 1

这

load("es6-shim")
    .then(load("reflect"))

不是做你认为它在做的事。

.then()等待它的this参数load("es6-shim")完成，然后调用传递给它的函数。但是，您不是要将函数传递给它，而是传递由load返回的承诺，您的load立即调用System.import，而不等待任何东西。

试一试

load("es6-shim").then(function() {
   return load("reflect");
}).then(function() {
   return load(....);
}).then(function() {
     ...

或者，您可以保留调用load的代码相同，但可以重写load以返回函数：

var load = function(packageName)
{
    return function() {
        return System.import(packageName)
            .then(function()
            {
                console.log(`Package "${ packageName }" loaded successfully.`);
            })
            .catch(function(error)
            {
                console.error(`Package "${ packageName }" could not be loaded.`, error);
            });
    }

}