Grunt build not exposing the globals I need - javascript

When I run my project locally with my grunt:server task, the project works as I expect. However, after building which takes all the vendor code and puts it into one file, two of my needed module aren't avialable, and the project doesn't work.
Here is my requirejs configuration:
requirejs.config
baseUrl: './js'
shim:
'underscore':
exports: '_'
'backbone':
deps: ['underscore', 'jquery']
exports: 'Backbone'
'stack':
deps: ['d3.global']
exports: 'stack'
'highlight':
exports: 'hljs'
paths:
'underscore': '../components/underscore/underscore'
'backbone': '../components/backbone/backbone'
'jquery': '../components/jquery/jquery'
'd3': '../components/d3/d3'
'd3.global': '../components/d3.global/d3.global'
'stack': '../components/stack/stack'
'highlight': '../components/highlightjs/highlight.pack'
require ['app/vendors'],->
console.log("Backbone", Backbone)
console.log("_", _)
console.log("$", $)
console.log("d3", d3)
console.log("stack", stack)
console.log("hljs", hljs)
app/vendors looks like
define [
'underscore'
'jquery'
'backbone'
'text'
'd3.global'
'stack'
'highlight'
], ->
When I run the project locally via grunt, I see all the globals printed out. However, when I build the project, Backbone Underscore and JQuery print out, while stack fails (hljs is also not available, and if I remove stack from app/vendors, it doesn't fix highlight, so its probably not an order thing).
the requirejs optimizer is called with the following configuration:
requirejs:
compile:
options:
baseUrl: 'js/'
appDir: './<%= yeoman.tmp_dist %>/'
dir: './<%= yeoman.dist %>/'
wrap: true
removeCombined: true
keepBuildDir: true
inlineText: true
mainConfigFile: '<%= yeoman.tmp_dist %>/js/main.js'
# no minification, is done by the min task
optimize: "none"
modules: [
{ name: 'app/vendors', exclude: [] }
{ name: 'app/app', exclude: ['app/vendors'] }
{ name: 'main', exclude: ['app/app', 'app/vendors'] }
Could there be something wrong with the stack and highlight files that I need to fix in order to make requirejs optimization and uglify work with them?
I installed highlightjs via bower by adding "highlightjs": "~8.0" to my bower.json file and running bower install. I downloaded stack.js from mbostock's stack project. I'm using v0 at the moment, with minor changes to make it work in this project. The source for all these are in the components directory of my github project.
BOUNTY If anyone is willing to clone the repo themselves, and try running the project with grunt server and grunt build to help me track down the problem, I'd greatly appreciate it. At the moment I have the vendor scripts in the github repo itself, so all you should need is compass and bower to run it.

This is due to wrap: true in the r.js config. Here's a simple configuration that isolates the issue:
main.js
define([ 'legacy' ], function(legacy) {
var greeting = 'hi';
console.log(greeting, legacy.foo);
});
legacy.js
var globalThing = { foo: 1, bar: 2 };
build.json
{
"name": "main",
"optimize": "none",
"out": "main-built.js",
"shim": { "legacy": { "exports": "globalThing" } },
"wrap": true
}
Let's run r.js (r.js -o build.json) and consider the result (formatted by me):
(function() { // this immediately-invoked function expression (IIFE)
// is here because r.js has "wrap: true" in the config
var globalThing = { foo: 1, bar: 2 };
// code generated from the "shim" entry in the config
define('legacy', function(global) {
return function() {
var ret, fn;
// since global.globalThing is undefined,
// that's where it goes wrong
return ret || global.globalThing;
};
}(this));
define('main', [ 'legacy' ], function(legacy) {
var greeting = 'hi';
console.log(greeting, legacy.foo);
});
})(); // end of the IIFE
As you can see from the code above, globalThing isn't global any more. The same happens with the stack and highlight libraries in your project as they use var and function declarations to define their globals.
To tackle this issue, we have a couple of options. The first is to consider whether you really need wrap: true in the config. If you drop it, the globals will get global again and everything should start working as expected. The second option is to try adding wrapShim: true to the config. You can read about nuances of using this option here. If we try it with our sample configuration, we'll get something like this:
(function() {
(function(root) {
define('legacy', [], function() {
return function() {
var globalThing = { foo: 1, bar: 2 };
return root.globalThing = globalThing;
}.apply(root, arguments);
});
})(this);
define('main', [ 'legacy' ], function(legacy) {
var greeting = 'hi';
console.log(greeting, legacy.foo);
});
})();
Looks good to me.

Related

RequireJS multipage r.js

I have a quite large app built with RequireJS and I'm trying optimise the modules with r.js.
But no matter what I do, I always get the same annoying error.
me: ~/WORK/LAB/require_r_js/js
→ r.js -o build.js
Optimizing (standard.keepLines.keepWhitespace) CSS file: /<path_to_my_js_folder>/js/dist/vendor/tinyscrollbar/tinyscrollbar.css
Tracing dependencies for: utils/Vendor
Error: ENOENT, no such file or directory
'/<path_to_my_js_folder>/js/dist/TweenLite.js'
In module tree:
utils/Vendor
cssplugin
It looks like my path cssplugin is been ignored, here is my build.js file:
{
mainConfigFile : "core/commom.js",
appDir: '.',
baseUrl: ".",
removeCombined: true,
findNestedDependencies: true,
dir: "./dist",
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
}
},
modules: [
{ name: "utils/Vendor" },
{
name: "core/Main",
exclude: ['utils/Vendor']
},
{
name: "controllers/MapsHome"
},
{
name: "controllers/SuperHome"
},
{
name: "controllers/Register"
},
{
name: "controllers/hotel/HotelHome"
}
]
}
Well.. I know it looks a lot of information, but this is my commom.js file (the RequireJS config):
(function() {
requirejs.config({
baseUrl: "../",
waitSeconds: 120,
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
jmask: "vendor/igorescobar/jquery-mask-plugin.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
},
facebook: {
exports: 'FB'
}
}
});
}).call(this);
The files are organized in this structure:
Well, in my website the scripts are loaded as this:
<script type="text/javascript">
require([globalServerConf.requireJSConfURL], function() {
require(['core/Main'], function(Main) {
var m = new Main();
// The name of the Page Controller is set by a PHP Variable:
m.init("{{$jsController}}");
});
});
</script>
So, a global JS object (built by a PHP script) has the URL to the requirejs.config object. When commom.js is loaded, RequireJS asks for core/Main.js file. When core/Main is loaded, it will ask first for the utils/Vendor module. This module loads all third part scripts (like jQuery, TweenLite, CSSPlugin, etc etc). Only when these files are loaded, Main.js asks for the page controller file (which makes use of many other files as well).
So, I am trying to build with r.js all these modules:
All third part scripts: utils/Vendor
Main script: core/Main
All other main pages controllers:
controllers/MapsHome, controllers/SuperHome, controllers/Register, controllers/hotel/HotelHome
Every time I run r.js, tweelite or cssplugin makes that error and the optimization is killed.

How to include SignalR with gulp build process?

When I run my Durandal app with main.js (not minified), it loads signalr.core and signalr.hubs correctly, however, after building with gulp, it fails to load signalr.hubs.
Here is my RequireJS config:
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': '../Scripts/knockout-3.2.0',
'knockout.validation': '../Scripts/knockout.validation',
'bootstrap': '../Scripts/bootstrap',
'jquery': '../Scripts/jquery-2.1.3',
'jquery.utilities': '../Scripts/jquery.utilities',
'toastr': '../Scripts/toastr',
'offline': '../Scripts/offline',
'signalr.core': '../Scripts/jquery.signalR-2.2.0.min',
"signalr.hubs": '../signalr/hubs?'
},
shim: {
'jquery.utilities': {
deps: ['jquery']
},
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
},
'knockout.validation': {
deps: ['knockout']
},
'signalr.core': {
deps: ['jquery'],
exports: '$.connection'
},
'signalr.hubs': {
deps: ['signalr.core'],
}
}
});
define('jquery', function () { return jQuery; });
define('knockout', ko);
define('moment', moment);
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/composition', 'global/session', 'knockout', 'knockout.validation', 'signalr.core', 'signalr.hubs'], function (system, app, viewLocator, composition, session) {
});
Here is my gulpfile:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('durandal', function () {
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main-built.js', //same as default, so not really required.
almond: true,
minify: true
})
.pipe(gulp.dest('app'));
});
I don't fully understand the minification process, but I do know that SignalR is not AMD compliant so that might be the issue. Also, the hub endpoint produces dynamic JavaScript so it would make sense that it can't be included in the build.
What am I missing to get signalr.hubs to play nicely with main-built.js? Should I load SignalR separately from RequireJS?
I guess there are ways to make the dynamic endpoint work, but as you already thought that's a bit of a different beast to treat. I would suggest you either use the proxyless approach (which removes the need of the dynamic endpoint, but you'll have to tweak your calls and event handlers a bit), or you add a step to your build process to serialize the dynamic endpoint through the signar.exe utility, as explained here.

How to use testr with karma-jasmine adapter?

Everything works (Karama, Jasmine, Underscore, Backbone, testr) as evidenced by the _UnitTestUnitTest passing. But simple testr statements always fail.
The basic _UnitTestUnitTest works!
it('works for jquery', function() {
expect( $("document")).toBeTruthy();
});
it('works for underscore', function() {
expect(_.size([1,2,3])).toEqual(3);
});
it('works for backbone', function() {
var model = Backbone.Model.extend();
expect(model).toBeTruthy();
});
it('works for testr', function() {
expect(testr).toBeTruthy();
});
However, in my other real unit test, it fails on the testr line:
AccountSummaryCollection_CLASS = testr('models/sales-rep/AccountSummaryCollection');
I'm certain i'm including my dependency of 'models/sales-rep/AccountSummaryCollection' correctly in my config (I see it hosted and getting loaded by require.js deps!!!
However, the big problem is it claims our application module is not loaded even though it is. I also tried to wrap the whole AccountSummaryUnitTest.js inside of require([‘AccountSummaryCollection’], function(){…. This produces a new error where inside a dependency (AccountSummary.js) the error “Backbone is not defined” is thrown. That makes no sense in the context because obviously the AccountSummaryCollection has already resolved Backbone.Collection. This bad resolution is what makes me suspect it is testr that is fishy.
I also tried to manually include the file using the karma config, but requirejs does not like that since it’s a conflicting define() function.
Below: serving actually means Requested by Client and the {{{dependency}}} file is my own trace to confirm they are added to the deps list in the karma-spec-runner.js.
It fails at this line:
AccountSummaryUnitCollection line 27: AccountSummaryCollection_CLASS = testr('models/sales-rep/AccountSummaryCollection');
Here's the "spec runner" javascript (basically copied from the docs, with some extra logging).
var dependencies = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
//
if (/Test\.js$/.test(file)) {
//traces my test files fine!
console.log("{{{testing file}}} --> "+ file );
dependencies.push(file);
}
}
}
// jam our application files into the deps
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (file.indexOf('src/main/app/') !== -1 ) {
//traces my dep files fine!
console.log("{{{dependency}}} file --> "+ file );
dependencies.push(file);
}
}
}
require.config({
baseUrl: 'base/src/main/app/',
paths: {
'resources' : '../resources/',
'jquery' : '../resources/js/lib/jquery-2.1.0.min',
'text' : '../resources/js/lib/text-2.0.10',
'i18n' : '../resources/js/lib/i18n-2.0.4',
'd3' : '../resources/js/lib/d3.v3.1.10.min',
'AppMeasurement' : '../resources/js/lib/appMeasurement',
'underscore' : '../resources/js/lib/underscore-1.5.2',
'Backbone' : '../resources/js/lib/backbone-1.1.2.min',
'testr' : '../../test/lib/testr'
},
deps: dependencies,
shim: {
d3: {
exports: 'd3'
},
AppMeasurement: {
exports: 'AppMeasurement'
},
underscore: {
deps:["jquery"],
exports: '_'
},
Backbone: {
deps:["jquery"],
exports: 'Backbone'
},
testr:{
exports: 'testr'
}
},
callback: window.__karma__.start,
locale: "en-us"
});
Here's the karma section of my gruntfile
karma: {
unit: {
background: false,
options: {
logLevel : 'debug',
basePath:'./',
// files for karma to host
files: [
{pattern: 'src/main/resources/js/lib/**/*.js', included: false, served: true},
{pattern: 'src/main/resources/js/plugins/**/*.js', included:false, served: true },
{pattern: 'src/test/lib/sinon.js', included: false },
{pattern: 'src/test/lib/testr.js', included: false },
{pattern: 'src/test/js/stubs/**/*.js', included: false, served: true},
// manually load our application unit test & deps to examine the simplest case
{pattern:'src/main/app/models/sales-rep/AccountSummary.js', included: false },
{pattern:'src/main/app/models/sales-rep/AccountSummaryCollection.js', included: false },
{pattern: '_UnitTestUnitTest.js', included: false},
{pattern: 'src/test/js/unit/AccountSummaryCollectionUnitTest.js', included: false},
'src/test/js/karma-spec-runner.js'
],
plugins: [
"karma-jasmine",
"karma-phantomjs-launcher",
"karma-requirejs",
'karma-chrome-launcher',
],
frameworks: [
"jasmine",
"requirejs"
],
browsers: [
//"PhantomJS"
"Chrome"
]
}
}
},
Here's a sample test that fails
Note that the testr config is per unit test. Plus, this test WORKS in plain in the browser jasmine!
// tried with and without the leading require statement as noted in main question.
require( ['models/sales-rep/AccountSummaryCollection'], function() {
describe('AccountSummaryCollectionUnitTest', function () {
var AccountSummaryCollection_CLASS;
function configureTestr() {
testr.config({
whitelist: [
'models/sales-rep/AccountSummaryCollection',
'models/sales-rep/AccountSummary'
]
});
}
beforeEach(function () {
configureTestr();
console.log("initializing AccountSummaryCollection_CLASS");
//fails on following line
AccountSummaryCollection_CLASS = testr('models/sales-rep/AccountSummaryCollection');
});
You need specific versions of libs to get it to work right:
testr 1.0.2 (NOT 1.0.3!!!!!)
Backbone 1.0.0 (not 1.1.2 for some reason)
underscore 1.6
require-2.1.11 [production] (for some reason we had 2.1.2)
Then I had to include:true for underscore and backbone in the Karma config. Then the shim works with require 2.1.11 without the mismatched anonymous define error.
Additioanlly, to make sure to delay the test execution. I did not have luck with the waitSeconds (that just increases the test duration).
The key part of the require config:
// since we are forcing Backbone in the dom instead of requiring it
callback: function(){
setTimeout(function () {
window.__karma__.start();
}, 4000);
},

requirejs window not defined

I'm getting this error when the optimizer is launched by grunt
(I'm using yeoman backbone-generator )
Running "requirejs:dist" (requirejs) task
Error: ReferenceError: window is not defined
I'm using requirejs and the plugin i18n.
This is my main.js
require.config({
//locale: "en",
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-notify': {
deps: [
'jquery'
]
},
swiper: {
deps: [
'jquery'
],
exports: 'Swiper'
},
bstrapcollapse: {
deps: [
'jquery',
'bstraptransition'
],
exports: 'collapse',
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
backbone: '../bower_components/backbone-amd/backbone',
underscore: '../bower_components/underscore-amd/underscore',
i18n: '../bower_components/requirejs-i18n/i18n',
'backbone.marionette': '../bower_components/backbone.marionette/lib/core/amd/backbone.marionette',
'backbone.wreqr': '../bower_components/backbone.wreqr/lib/amd/backbone.wreqr',
'backbone.babysitter': '../bower_components/backbone.babysitter/lib/amd/backbone.babysitter',
'jquery-ui': '../bower_components/jquery-ui/ui/jquery-ui',
loglevel: '../bower_components/loglevel/dist/loglevel.min',
moment: '../bower_components/moment/moment',
alertify: '../bower_components/alertify/alertify',
swiper: '../bower_components/swiper/dist/idangerous.swiper-2.0.min',
fastclick: '../bower_components/fastclick/lib/fastclick',
bstrapcollapse: '../bower_components/sass-bootstrap/js/bootstrap-collapse',
bstraptransition: '../bower_components/sass-bootstrap/js/bootstrap-transition',
'requirejs-text': '../bower_components/requirejs-text/text',
async: '../bower_components/requirejs-plugins/src/async',
},
config: {
i18n: {
locale: JSON.parse(window.localStorage.getItem('settings')).language || 'en',
}
}
});
I need to change language based on user input that's why i need to fetch localStorage and set the locale in the config.
There's a solution for this?
Thank you.
I haven't done much in the region of runtime javascript, but I know that many of the libraries you know and are used to in browsers (document object model's "getElementById", local storage) are not available in runtimes like Grunt or Rhino. Your use of localStorage in that settings file appears to be the issue.
Instead, you need to make use of whatever API is given to you. For instance, a quick search found some Grunt examples where they read/write to a file on the filesystem: http://gruntjs.com/sample-gruntfile
Obviously, this would be impossible in a browser, as browsers don't let you access files; but you may as well take advantage of it in Grunt. You can also feature-detect which mode you're in with clauses like this:
if (window) {
...
}
else if (grunt) {
...
}
A workaround that worked for me :
config: {
i18n: {
locale: (function(){
try{
return localStorage.getItem('locale') || 'en' ;
}catch(ex){
return 'en';
}
})()
}
}
But still not convinced by this trick. Maybe someone else has a better idea ?

r.js not compiling shimmed scripts properly

I'm able to successfully compile my JS modules via Grunt's requirejs task, but I'm getting undefined with any shim scripts. Here is my config
requirejs.config({
"baseUrl": "../../../components/",
"paths": {
"less": "less.js/dist/less-1.3.3",
"datepicker": "jquery-ui/ui/jquery.ui.datepicker",
"jquery": "jquery/jquery",
"jqueryui": "jquery-ui/ui/jquery-ui",
"spectrum": "spectrum/spectrum",
"class": "class/class",
"underscore": "underscore-amd/underscore",
"d3": "d3/d3",
"nv": "nvd3/nv.d3",
"dataTables": "datatables/dataTables"
},
shim: {
less: {
exports: "less"
},
jqueryui: {
exports: "jqueryui"
},
spectrum: {
exports: "spectrum"
},
class:{
deps: [ 'jquery'],
exports: "class"
}
}
})
Here is my requirejs config from my Gruntfile:
requirejs: {
dist: {
options: {
mainConfigFile: 'src/scripts/main.js',
out: '<%= yeoman.dist %>/scripts/main.js',
paths:{
"main" : "../final/src/scripts/main"
},
include:['main'],
preserveLicenseComments: false,
useStrict: true,
wrap: true
}
}
}
Now when I run grunt requirejs:dist It compiles just fine, and does include my shimmed files. But whenever I try to run the compiled JS, access to any of my shimmed scripts are undefined.
Not sure what you mean by "access to any of my shimmed scripts are undefined". You need to ensure that shimmed scripts are included in correct order. Also you may try defining fake module for that script. In you build JS configuration add:
onBuildRead: function (moduleName, path, contents) {
if (moduleNam === 'spectrum'){
contents += '; define(' + moduleName + ', function(){ return window.spectrum; });';
}
return contents;
}
You need to understand, what exports does. After script is loaded it will look for that variable in a global namespace. I don't think there is 'jqueryui' namespace. So it will always be undefined, because it has to load after jQuery and it just extends jQuery, so module can not return anything useful.
I hope that helps.

Categories