`serie: true` 无法确保模块的加载顺序
`serie: true` cannot ensure loading order of modules
我想通过 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'])
}]
},
})
但是上面的代码还是returns:
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
有人知道怎么回事吗?
问题是您正在将 serie
选项添加到提供程序配置对象,which is ignored 因为它会获取每个模块的配置并以并行方式加载它们。基本上,该选项需要出现在 每个 需要按顺序加载脚本的模块上。
一个快速的解决方案是使用 promises 来确保模块按顺序加载。由于 load()
调用 returns 一个承诺,我们可以在那之后执行第二次加载:
$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 and ocLazyLoad
plays nicely with requireJS
您可能有兴趣尝试一下。您可以将 requireJS
设置为 ocLazyLoad
上模块的加载程序,并且在加载依赖于
CodeMirror
,它会确保它们已经加载(意味着您不需要按顺序执行操作)。
不要为不同的库创建模块,而是试试这个方法,看看它是否有效,因为它 运行 对我来说很好:
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"
]);
}]
}
我想通过 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'])
}]
},
})
但是上面的代码还是returns:
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
有人知道怎么回事吗?
问题是您正在将 serie
选项添加到提供程序配置对象,which is ignored 因为它会获取每个模块的配置并以并行方式加载它们。基本上,该选项需要出现在 每个 需要按顺序加载脚本的模块上。
一个快速的解决方案是使用 promises 来确保模块按顺序加载。由于 load()
调用 returns 一个承诺,我们可以在那之后执行第二次加载:
$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 and ocLazyLoad
plays nicely with requireJS
您可能有兴趣尝试一下。您可以将 requireJS
设置为 ocLazyLoad
上模块的加载程序,并且在加载依赖于
CodeMirror
,它会确保它们已经加载(意味着您不需要按顺序执行操作)。
不要为不同的库创建模块,而是试试这个方法,看看它是否有效,因为它 运行 对我来说很好:
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"
]);
}]
}