tec*_*don 5 requirejs angularjs gruntjs angular-ui grunt-contrib-requirejs
我使用requirejs并配置我的产品工件,因此组合我的库并在它们之间设置模块依赖关系以使用requirejs的grunt任务获得适当的加载序列.在我的livereload服务器中使用运行时模块注入没有问题,它可以访问非组合库.为了清楚起见,我禁用了所有缩小/丑化并开启了js-beautify.
requirejs: {
dist: {
// Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
options: {
// `name` and `out` is set by grunt-usemin
// name: 'App',
baseUrl: yeomanConfig.app + '/scripts',
mainConfigFile: yeomanConfig.app + '/scripts/config.js',
out: yeomanConfig.dist + '/scripts/main.js',
optimize: 'none',
// TODO: Figure out how to make sourcemaps work with grunt-usemin
// https://github.com/yeoman/grunt-usemin/issues/30
//generateSourceMaps: true,
// required to support SourceMaps
// http://requirejs.org/docs/errors.html#sourcemapcomments
beautify: false,
removeCombined: false,
generateSourceMaps: false,
preserveLicenseComments: false,
useStrict: true,
mangle: false,
compress: false,
// wrap: true,
// https://github.com/mishoo/UglifyJS2
}
}
},
Run Code Online (Sandbox Code Playgroud)
我正在使用Kendo,Angular和Angular-Keno-UI.我知道Kendo是AMD模块就绪,但它看起来不像Angular-Keno-UI.我期望创建一个垫片并将其包装在相应的requirejs define函数中,但是我发现这不会发生.
require.config({
cjsTranslate: true,
paths: {
jquery: 'vendor/jquery/jquery',
'angular-kendo-ui': 'vendor/angular-kendo-ui/build/angular-kendo',
kendo: 'vendor/kendoui.complete.2013.2.918.trial/js/kendo.all.min',
angular: 'vendor/angular/angular',
requirejs: 'vendor/requirejs/require',
'angular-animate': 'vendor/angular-animate/angular-animate',
'angular-ui-router': 'vendor/angular-ui-router/release/angular-ui-router.min',
'angular-resource': 'vendor/angular-resource/angular-resource'
},
shim: {
jquery: {
exports: '$'
},
angular: {
deps: [
'jquery'
],
exports: 'angular'
},
'angular-resource': {
deps: [
'angular'
]
},
'angular-kendo-ui': {
deps: [
'angular',
'kendo'
]
},
'angular-ui-router': {
deps: [
'angular'
]
}
}
});
Run Code Online (Sandbox Code Playgroud)
为了解决模块准备不足的问题,我自己包装:
define('angular-kendo-ui', [
'angular',
'kendo'
], function (
angular,
kendo
) {
< original angular-kendo-ui source >
});
Run Code Online (Sandbox Code Playgroud)
我误解了垫片的应用吗?它似乎我有它并没有实际包装定义的路径,而只是指向它如果请求模块(这在动态模块加载中很好)
在我最初审查这些技术的过程中,我注意到有一种方法可以让requirejs(或我管道中的一个资产变换器)自动为我包装模块.任何人都有我的提示,我认为这是requirejs将配置中定义的模块包装为路径,但也许我错了.下面是正在运行的任务的打印输出:
Done, without errors.
Elapsed time
build 887ms
useminPrepare:html 22ms
concurrent:dist 8s
autoprefixer:dist 174ms
requirejs:dist 19s
jsbeautifier:dist 2s
concat:public/styles/main.css 46ms
concat:public/scripts/main.js 56ms
cssmin:public/styles/main.css 81ms
copy:dist 26ms
usemin:html 5s
usemin:css 24s
Run Code Online (Sandbox Code Playgroud)
这只是一个疯狂的猜测(取决于您的优化器版本),但 - 不太酷 - 配置文档在这里指出:
从 2.1.11 开始,shimmed 依赖项可以包装在 Define() 包装器中,以在中间依赖项 AMD 具有自己的依赖项时提供帮助。典型的例子是一个使用 Backbone 的项目,它依赖于 jQuery 和 Underscore。需要 Backbone 立即可用的填充依赖项将不会在构建中看到它,因为在依赖项准备就绪之前,Backbone 的 AMD 兼容版本不会执行 Define() 函数。通过包装这些填充的依赖项,可以避免这种情况,但如果这些填充的依赖项以奇怪的方式使用全局范围,则可能会引入其他错误,因此它不是包装的默认行为。
所以也许使用:
wrapShim: true
Run Code Online (Sandbox Code Playgroud)
https://github.com/jrburke/r.js/blob/master/build/example.build.js
由于您使用“mainConfigFile”,垫片配置应该已经在优化器中,这通常是另一个失败点。
| 归档时间: |
|
| 查看次数: |
1341 次 |
| 最近记录: |