I am trying to integrate requirejs into an existing project, which runs on a node/grunt stack. I want to use the r.js optimizer to concat everything together and noodle through dependencies to do its magic as well.
我正在尝试将requirejs集成到现有项目中,该项目在node / grunt堆栈上运行。我想使用r.js优化器将所有内容连接在一起,并通过依赖关系来实现它的魔力。
I am able to get r.js to build a single .js file, and there are no errors... but nothing happens. I set breakpoints in my code, but nothing is getting kicked off - the app never actually runs the bootstrap.js file. I have tried putting the bootstrap.js in an immediate function, and of course it does run then, but the dependencies are not loaded yet (it seems). What am I missing here?
我能够让r.js构建一个.js文件,并且没有错误......但没有任何反应。我在我的代码中设置了断点,但没有任何东西被启动 - 应用程序从未实际运行bootstrap.js文件。我已经尝试将bootstrap.js放在一个立即函数中,当然它确实运行了,但依赖项尚未加载(似乎)。我在这里想念的是什么?
File structure:
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 task:
gruntfile requirejs任务:
requirejs: {
compile: {
options: {
name: 'app',
out: 'build/js/app.js',
baseUrl: 'app',
mainConfigFile: 'config/main.js',
optimize: "none"
}
}
},
main.js config:
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']);
});
}
);
1 个解决方案
#1
3
You need to set up a main point of entry into your application; here it would be app.js, but all you are doing in that file is defining that files dependencies and not actually loading any code. You need to change your code to this:
您需要在应用程序中设置一个主要入口点;这里它将是app.js,但你在该文件中所做的只是定义文件依赖项而不是实际加载任何代码。您需要将代码更改为:
require([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
See this thread for more details on the difference between define and require.
有关define和require之间差异的更多详细信息,请参阅此主题。
#1
3
You need to set up a main point of entry into your application; here it would be app.js, but all you are doing in that file is defining that files dependencies and not actually loading any code. You need to change your code to this:
您需要在应用程序中设置一个主要入口点;这里它将是app.js,但你在该文件中所做的只是定义文件依赖项而不是实际加载任何代码。您需要将代码更改为:
require([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
See this thread for more details on the difference between define and require.
有关define和require之间差异的更多详细信息,请参阅此主题。