我正在尝试将 requirejs 集成到现有项目中,该项目在节点/grunt 堆栈上运行。我想使用 r.js 优化器将所有内容连接在一起,并通过依赖关系来发挥其魔力。
我能够让 r.js 构建单个 .js 文件,并且没有错误......但没有任何反应。我在代码中设置了断点,但没有任何东西被启动 - 应用程序实际上从未运行 bootstrap.js 文件。我尝试将 bootstrap.js 放入立即函数中,当然它确实会运行,但依赖项尚未加载(看起来)。我在这里缺少什么?
文件结构:
app
-> modules
- -> common
- - -> auth.js // contains an auth call that needs to return before I bootstrap angular
-> app.js
-> index.html
config
-> main.js
node_modules
vendor
-> angular/jquery/require/domready/etc
gruntfile.js
gruntfile requirejs 任务:
requirejs: {
compile: {
options: {
name: 'app',
out: 'build/js/app.js',
baseUrl: 'app',
mainConfigFile: 'config/main.js',
optimize: "none"
}
}
},
main.js 配置:
require.config({
paths: {
'bootstrap': '../app/bootstrap',
'domReady': '../vendor/requirejs-domready/domReady',
'angular': '../vendor/angular/angular',
'jquery': '../vendor/jquery/jquery.min',
'app': 'app',
'auth': '../app/modules/common/auth',
requireLib: '../vendor/requirejs/require'
},
include: ['domReady', 'requireLib'],
shim: {
'angular': {
exports: 'angular'
}
},
// kick start application
deps: ['bootstrap']
});
app.js:
define([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
bootstrap.js:
define([
'require',
'angular',
'app',
'jquery',
'auth'
], function (require, angular, app, $, auth) {
var Authentication = auth.getInstance();
.. do auth stuff...
if (Authentication.isAuthorized) {
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
}
);
最佳答案
您需要设置一个进入您的应用程序的主要入口点;这里是 app.js
,但您在该文件中所做的只是定义该文件的依赖项,而不是实际加载任何代码。您需要将代码更改为:
require([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
有关 the difference between define and require 的更多详细信息,请参阅此帖子.
关于angularjs - 使用 grunt 和 r.js/requirejs 手动引导,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19781907/