模块未按正确顺序加载

Question

.NET 开发人员对现代客户端 Web 应用程序相当陌生。我正在使用 Chart.js 开发一个 Angular2 图表应用程序。模块加载了 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);

在 Angular 模块初始化之前加载了一些必需的组件，如下所示（主页，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() returns 一个承诺，对吧？ promise 的 then() 和 catch() 功能也是如此，对吧？所以调用 then() 函数会等待上一个调用完成再继续，对吧？然而，根据控制台输出， jasny-boostrap 在 bootstrap 之前加载 [=] 59=]，所以它们都无法加载。更令人困惑的是加载顺序不一致；有时看起来像这样：

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.

我 google 周围发现了一些帖子建议 meta.package.deps 属性可以用来告诉 SystemJS 模块依赖什么并确保它首先加载，但这对我不起作用。

或者，我总是可以使用 index.html 中的 <script> 标签加载 jquery ，但我更愿意将它们保持在最低限度——我已经加载了带有 <style> 标签的样式表，我不太喜欢，但我找不到更好的解决方案，除了 webpack ，到目前为止，对于我的生活我无法弄清楚。然而

显然我遗漏了什么，但我不知道是什么。非常感谢任何和所有输入。

Answer 1

这个

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

没有按照您的想法去做。

.then() 等待其 this 参数 load("es6-shim") 完成，然后调用您传递给它的函数。但是你并没有向它传递一个函数，你传递了一个由 load 编辑的承诺 return，并且你的 load 立即调用 System.import 而无需等待任何东西。

尝试

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

或者您可以保持调用 load 的代码相同，但将 load 重写为 return 一个函数：

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);
            });
    }

}

模块未按正确顺序加载

Module doesn't load in correct order

javascript

jquery

twitter-bootstrap

systemjs

angular