`serie: true` 不能保证模块的加载顺序

Question

我想通过ocLazyLoad 加载CodeMirror。由于xml.min.js、htmlmixed.min.js、css.min.js等都需要codemirror.min.js在它们之前加载。我尝试使用serie: true 来确定加载顺序：

$ocLazyLoadProvider.config({
    debug: true,
    serie: true,
    modules: [{ 
        name : 'codeMirror1', 
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js"
    ]},{
        name : 'codeMirror2',
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js"
    ]}]
});

$stateProvider
    .state('site', {
        abstract: true,
        template: '<ui-view/>',
        resolve: {
            loadSiteCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load(['codeMirror1', 'codeMirror2'])
            }]
        },
    })

但是，上面的代码仍然返回：

angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css
xml.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at xml.min.js:1
    at xml.min.js:1
(anonymous) @ xml.min.js:1
(anonymous) @ xml.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js
htmlmixed.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at htmlmixed.min.js:1
    at htmlmixed.min.js:1
(anonymous) @ htmlmixed.min.js:1
(anonymous) @ htmlmixed.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js
css.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at css.min.js:1
    at css.min.js:1
(anonymous) @ css.min.js:1
(anonymous) @ css.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js
javascript.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at javascript.min.js:1
    at javascript.min.js:1
(anonymous) @ javascript.min.js:1
(anonymous) @ javascript.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js
angular.js:13920 ocLazyLoad.componentLoaded (3) ["ui.codemirror", "constant", "uiCodemirrorConfig"]
angular.js:13920 ocLazyLoad.componentLoaded (3) ["ui.codemirror", "directive", "uiCodemirror"]
angular.js:13920 ocLazyLoad.moduleLoaded ui.codemirror
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js

有谁知道怎么回事？

Answer 1

问题是您将serie 选项添加到提供程序配置对象which is ignored，因为它将获取每个模块的配置并无论如何并行加载它们。基本上，该选项需要出现在需要按顺序加载脚本的 每个 模块上。

一个快速的解决方案是使用 Promise 来确保模块按顺序加载。由于load() 调用返回了一个promise，我们可以在此之后执行第二次加载：

$ocLazyLoadProvider.config({
    debug: true,
    modules: [{ 
        name : 'codeMirror1', 
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js"
    ]},{
        name : 'codeMirror2',
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
            ...
    ]}]
});

...
loadSiteCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
    return $ocLazyLoad.load(['codeMirror1']).then(function() {
      return $ocLazyLoad.load(['codeMirror2'])
    });
}]
...

查看this plunker 以获取此示例。

或者，由于 CodeMirror supports module loaders 和 ocLazyLoad plays nicely with requireJS 您可能有兴趣尝试一下。您可以将requireJS 设置为ocLazyLoad 上的模块的加载器，并且在加载依赖于的模块时 CodeMirror，它会确保它们已经被加载（意味着你不需要做一系列的事情）。

Answer 2

不要为不同的库创建模块，试试这个方法，看看它是否有效，因为它对我来说运行良好：

resolve: {
  plugins: ['$ocLazyLoad', function($ocLazyLoad) {
    return $ocLazyLoad.load([
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js"
    ]);
  }]
}