RequireJS 捆绑包在优化器中失败 - "modules share the same URL"
RequireJS bundles fail in optimizer - "modules share the same URL"
tl;博士
RequireJS 优化器不喜欢我在模块上定义 bundle 定义,但如果我不定义 bundle 也找不到模块。
长版
我在尝试使用 requirejs 优化器时遇到以下错误:
Error: Module loading did not complete for: scripts/simulation.bundle, app_mini, testservice
The following modules share the same URL. This could be a misconfiguration if that URL only has one anonymous module in it:
.../web/dist/scripts/app.bundle.js: app_mini, testservice
我实际上是在使用 grunt-contrib-requirejs 来优化我的 js 脚本以用于生产。在添加 simulator.bundle
之前一切正常
我有 3 个捆绑包:
- app.bundle(主包)
- simulation.bundle
- vendor.bundle
这是 requirejs grunt 任务的 modules
选项
[{
name: 'scripts/vendor.bundle',
exclude: [],
override: {
paths: {
angular: 'bower/angular/angular',
jquery: 'bower/jquery/dist/jquery',
ngRoute: "bower/angular-route/angular-route"
},
shim: {
angular: {
exports: 'angular',
deps: ['jquery'] // make jquery dependency - angular will replace jquery lite with full jquery
},
bundles: {
'scripts/app.bundle': ['app_mini', 'testservice'],
},
}
}
},
{
name: 'scripts/simulation.bundle',
exclude: [],
override: {
paths: {},
shim: {},
bundles: {
'scripts/vendor.bundle': ['angular', 'jquery'],
'scripts/app.bundle': ['app_mini', 'testservice']
}
}
},
{
name: 'scripts/app.bundle',
exclude: ['scripts/vendor.bundle'],
override: {
paths: {
app_mini: 'scripts/app.mini',
testservice: 'scripts/features/test.service'
},
shim: {},
bundles: {
'scripts/vendor.bundle': ['angular', 'jquery']
}
}
}
]
simulation.bundle
中的包似乎是问题所在。但是,如果我删除它们,则找不到文件:
>> Error: ENOENT: no such file or directory, open
>> '...\web\dist\app_mini.js'
>> In module tree:
>> scripts/simulation.bundle
simulation.bundle
只是一个虚拟模块,正在加载 angular
和 app_mini
:
define(['app_mini', 'angular'], function(app_mini, angular) {
// nothing here
}
所以无论哪种方式,优化器都无法处理依赖项。我必须如何配置才能使其正常工作?
好吧,我又一次发布了我自己问题的答案,我希望其他人能从我的错误中受益;)
所以我发现的是:
Bundle 配置仅适用于 requireJS,不适用于优化器!
我在配置中定义的包导致模块共享相同的错误 url。
正确的做法是为所有模块定义所有路径,并按名称专门排除不应包含在模块中的模块。
例如,app_mini
应该进入 app.bundle
,但因为它在 simulation.bundle
中是必需的,所以它会被包含在那里,因为排除 app.bundle
不是yet possible(目前还没有优化),我们需要直接排除app_mini
。
因此,工作配置如下所示:(未测试)
paths: {
angular: 'bower/angular/angular',
jquery: 'bower/jquery/dist/jquery',
ngRoute: "bower/angular-route/angular-route"
app_mini: 'scripts/app.mini',
testservice: 'scripts/features/test.service'
},
shim: {
angular: {
exports: 'angular',
deps: ['jquery'] // make jquery dependency - angular will replace jquery lite with full jquery
}
},
modules: [
{
name: 'scripts/vendor.bundle',
exclude: [],
},
{
name: 'scripts/simulation.bundle',
exclude: [`app_mini`],
},
{
name: 'scripts/app.bundle',
exclude: ['scripts/vendor.bundle'],
}
}]
tl;博士
RequireJS 优化器不喜欢我在模块上定义 bundle 定义,但如果我不定义 bundle 也找不到模块。
长版
我在尝试使用 requirejs 优化器时遇到以下错误:
Error: Module loading did not complete for: scripts/simulation.bundle, app_mini, testservice
The following modules share the same URL. This could be a misconfiguration if that URL only has one anonymous module in it:
.../web/dist/scripts/app.bundle.js: app_mini, testservice
我实际上是在使用 grunt-contrib-requirejs 来优化我的 js 脚本以用于生产。在添加 simulator.bundle
我有 3 个捆绑包:
- app.bundle(主包)
- simulation.bundle
- vendor.bundle
这是 requirejs grunt 任务的 modules
选项
[{
name: 'scripts/vendor.bundle',
exclude: [],
override: {
paths: {
angular: 'bower/angular/angular',
jquery: 'bower/jquery/dist/jquery',
ngRoute: "bower/angular-route/angular-route"
},
shim: {
angular: {
exports: 'angular',
deps: ['jquery'] // make jquery dependency - angular will replace jquery lite with full jquery
},
bundles: {
'scripts/app.bundle': ['app_mini', 'testservice'],
},
}
}
},
{
name: 'scripts/simulation.bundle',
exclude: [],
override: {
paths: {},
shim: {},
bundles: {
'scripts/vendor.bundle': ['angular', 'jquery'],
'scripts/app.bundle': ['app_mini', 'testservice']
}
}
},
{
name: 'scripts/app.bundle',
exclude: ['scripts/vendor.bundle'],
override: {
paths: {
app_mini: 'scripts/app.mini',
testservice: 'scripts/features/test.service'
},
shim: {},
bundles: {
'scripts/vendor.bundle': ['angular', 'jquery']
}
}
}
]
simulation.bundle
中的包似乎是问题所在。但是,如果我删除它们,则找不到文件:
>> Error: ENOENT: no such file or directory, open
>> '...\web\dist\app_mini.js'
>> In module tree:
>> scripts/simulation.bundle
simulation.bundle
只是一个虚拟模块,正在加载 angular
和 app_mini
:
define(['app_mini', 'angular'], function(app_mini, angular) {
// nothing here
}
所以无论哪种方式,优化器都无法处理依赖项。我必须如何配置才能使其正常工作?
好吧,我又一次发布了我自己问题的答案,我希望其他人能从我的错误中受益;)
所以我发现的是:
Bundle 配置仅适用于 requireJS,不适用于优化器!
我在配置中定义的包导致模块共享相同的错误 url。
正确的做法是为所有模块定义所有路径,并按名称专门排除不应包含在模块中的模块。
例如,app_mini
应该进入 app.bundle
,但因为它在 simulation.bundle
中是必需的,所以它会被包含在那里,因为排除 app.bundle
不是yet possible(目前还没有优化),我们需要直接排除app_mini
。
因此,工作配置如下所示:(未测试)
paths: {
angular: 'bower/angular/angular',
jquery: 'bower/jquery/dist/jquery',
ngRoute: "bower/angular-route/angular-route"
app_mini: 'scripts/app.mini',
testservice: 'scripts/features/test.service'
},
shim: {
angular: {
exports: 'angular',
deps: ['jquery'] // make jquery dependency - angular will replace jquery lite with full jquery
}
},
modules: [
{
name: 'scripts/vendor.bundle',
exclude: [],
},
{
name: 'scripts/simulation.bundle',
exclude: [`app_mini`],
},
{
name: 'scripts/app.bundle',
exclude: ['scripts/vendor.bundle'],
}
}]