javascript - 模块未按正确顺序加载

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()返回一个 promise ，对吗？ promise 的 then() 也是如此。和catch()函数，对吗？所以调用then()函数会等待上一个调用完成后再继续，对吗？然而，根据控制台输出，jasny-boostrap先于bootstrap加载，而bootstrap又先于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 模块依赖什么并确保它首先加载，但这对我不起作用。

或者，我总是可以使用 <script> 加载 jquery index.html 中的标记，但我希望将其保持在最低限度 - 我已经使用 <style> 加载样式表标签，我不太喜欢，但除了 webpack 之外，我找不到更好的解决方案，到目前为止，我一生都无法弄清楚。然而。

显然我错过了一些东西，但我不知道它是什么。非常感谢任何和所有的输入。

Answer 1

这个

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

没有做你认为它正在做的事情。

.then() 等待其 this 参数 load("es6-shim") 完成，然后调用函数你传递给它。但是您没有向其传递函数，而是传递了 load 返回的 promise ，并且您的 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);
            });
    }

}