I have a directory structure like this:
assets
modules
module1
models
templates
views //contains individual modules
app.js
build.js
require.js
text.js
And here is my build profile
({
paths: {
jquery: 'assets/js/jquery',
underscore: 'assets/js/underscore',
Backbone: 'assets/js/backbone',
bootstrap:'assets/js/bootstrap',
flexslider:'assets/js/jquery.flexslider',
fullCalendar:'assets/js/fullcalendar'
},
shim: {
underscore: {
exports: "_"
},
Backbone: {
deps: ['underscore', 'jquery'],
exports: "Backbone"
},
flexslider:{
deps:['jquery'],
exports:"flexslider"
},
fullCalendar:{
deps:['jquery'],
exports:"fullCalendar"
}
},
baseUrl : "./",
name: 'app',
out: "dist/app.js",
removeCombined: true,
findNestedDependencies: true
})
When i run the optimizer, I just get one app.js file in dist folder and it doesn't include anything from the modules directory. How do I optimize the whole project? Or i am lacking some fundamental understanding?
Related
I am using gulp and requirejs-optimize
My init.js
;
(function(require) {
"use strict";
//Constants
require.config({
paths: {
"angular": "app/libs/angular/angular.min",
"domready": "app/libs/domReady/domReady",
"angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
"angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
"App": "app/app",
"angular-animate": "app/libs/angular-animate/angular-animate.min",
"ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
"enums": "app/enums"
},
waitSecond: 0,
shim: {
"angular": {
exports: "angular",
deps: []
},
"angular-ui-router": {
deps: ["angular"]
},
"angular-bootstrap": {
deps: ["angular"]
},
"ui-bootstrap-tpls": {
deps: ["angular-bootstrap"]
},
"domready": {
deps: []
},
"App": {
deps: ["angular"]
},
"angular-animate": {
deps: ["angular"],
exports: "angular"
}
}
});
//This module defines all the Global constants for the app
define("CONST", [], {
templatesPath: "views/",
URL: "https://saltjs-nirus.c9.io/service"
});
define(["require", "domready"], function(require, domready) {
domready(function() {
require(["angular", "App", "app/router"], function(angular, app) {
angular.bootstrap(document, ["salt"]);
});
});
});
})(window.requirejs);
and my Build config file is as below
var gulp = require("gulp");
var requirejsOptimize = require('gulp-requirejs-optimize');
gulp.task('scripts', function() {
return gulp.src(["./../ClientApp/init.js", "./../ClientApp/app/libs/domReady/domReady.js"])
.pipe(requirejsOptimize(function(file) {
return {
baseUrl: "./../ClientApp/",
useStrict: true,
optimize: "uglify",
paths: {
"angular": "app/libs/angular/angular.min",
"domready": "app/libs/domReady/domReady",
"angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
"angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
"App": "app/app",
"angular-animate": "app/libs/angular-animate/angular-animate.min",
"ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
"enums": "app/enums"
},
shim: {
"angular": {
exports: "angular",
deps: []
},
"angular-ui-router": {
deps: ["angular"]
},
"angular-bootstrap": {
deps: ["angular"]
},
"ui-bootstrap-tpls": {
deps: ["angular-bootstrap"]
},
"domready": {
deps: []
},
"App": {
deps: ["angular"]
},
"angular-animate": {
deps: ["angular"],
exports: "angular"
}
}
}
}))
.pipe(gulp.dest('./../build/final.js'));
});
gulp.task("default", ['scripts'])
Problem: When run gulp i am getting below error
ENOENT, no such file or directory
'/home/ubuntu/workspace/ClientApp/domReady.js'
Here the requirejs optimizer is not taking the path option specified in the build-config file, instead its searching for the physical path which is throwing the error. How can i force the optimizer to lookup to the path option specified in the r.js build config and pick up the files from there for optimization.
Finally i figured out to make it work:
I switched from gulp-optimizer to straight Node r.js as Gulp dev have suggested to use the optimizer directly as r.js is not compatible with gulp.
Git Blacklist.json:
"gulp-module-requirejs": "use the require.js module directly",
Below is my config file:
({
mainConfigFile: "./../ClientApp/app/init.js",
name: "init",
baseUrl: "./../ClientApp/app/",
insertRequire:["init"],
findNestedDependencies: true,
out: "./../ClientApp/build/final.js",
wrap: true,
optimize: "uglify",
uglify: {
toplevel: true,
ascii_only: true,
beautify: false,
max_line_length: 1000,
defines: {
DEBUG: ['name', 'false']
},
no_mangle: true
}
});
I am using uglify for minification provided by require.js
Explanation:
mainConfigFile: Use this option to point out to the file where you have defined your paths, shims, deps etc. RequireJs is intelligent enough to pick the config from this declaration for processing(they use regex pattern to filter this part, so be careful. Refer their DOC)
name : An entrypoint module name. Define this where your executin kicks-off. PS: If you have config and EP is the same file, require will detect this and add the name to your defined call.
insertRequire: This will insert a require statement at the end which will trigger the execution of your code. See the DOC.
findNestedDependencies : Instruct require to pick the dependencies from your entrypoint file. Traverse thorough the files and grab the dependencies for final build.
Rest is self explanatory or refer the documentation
Well this saved me.
To use with the gulp build system see gulp shell module, by this you can wireup your build system to automate the complete process.
Refer this answer to know how to achieve this.
Hope this answer helps someone stuck same as me!
I have read the answer to this question require js loading scripts from cdn fail. But in my case it does not help. I have a require JS setup and I want to use CDN to load my libraries.
The Require JS documentation says below is the right way to load libs from CDN with a fallback to local files.
requirejs.config({
//To get timely, correct error triggers in IE, force a define/shim exports check.
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//If the CDN location fails, load from this location
'lib/jquery'
]
}
});
require(['jquery'], function ($) {
});
I am using the same method but I get an error instead, below is my code
requirejs.config({
baseUrl: location.protocol + '//' + location.host + '/app',
waitSeconds: 0,
paths: {
'jquery': ['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min','/assets/js/vendor/jquery'],
'jqueryPjax': '/assets/js/vendor/jquery.pjax',
'jqueryUI': '/assets/js/vendor/jquery-ui.min',
'jqueryMousewheel': '/assets/js/jquery.mousewheel',
'jScrollPane': '/assets/js/jquery.jscrollpane.min',
'fastclick': '/assets/js/vendor/fastclick',
'jquerySlidebars': '/assets/js/jquery.slidebars.min',
'imagesLoaded': '/assets/js/imagesloaded.pkgd.min',
'fancyBox': '/assets/js/jquery.fancybox.pack',
'fancyBoxThumb': '/assets/js/jquery.fancybox-thumbs',
'text': '/assets/js/vendor/text',
'chosen': '/assets/js/vendor/chosen',
'bb': '/assets/js/vendor/backbone-min',
'underscore': '/assets/js/vendor/underscore-min',
'angular': '/assets/js/angular.min',
'ventFactory': 'base/ventFactory',
'util': 'base/util',
'dom': 'base/dom',
'actionHandler': 'base/actionHandler',
'ajax': 'base/ajax'
},
shim: {
'jquery': {
exports: 'jQuery'
},
'jqueryUI': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'jqueryPjax': {
deps: ['jquery'],
exports: 'jQuery.fn.pjax'
},
'jqueryMousewheel': {
deps: ['jquery'],
exports: 'jQuery.fn.mousewheel'
},
'jScrollPane': {
deps: ['jqueryMousewheel'],
exports: 'jQuery.fn.jScrollPane'
},
'jquerySlidebars': {
deps: ['jquery'],
exports: 'jquerySlidebars'
},
'fancyBox': {
deps: ['jquery'],
exports: 'fancyBox'
},
'fancyBoxThumb': {
deps: ['jquery', 'fancyBox'],
exports: 'fancyBoxThumb'
},
'chosen': {
deps: ['jquery'],
exports: 'chosen'
}
}
});
requirejs(['jquery', 'app'], function($, app) {
$(function() {
app.start();
});
});
I have just made the changes for Jquery as of now and I am giving both CDN URL and local path but when I load my page I get an error
TypeError: $el.siblings is not a function
Adding on
I am using Require JS for loading my libs but then at the production I am using almond, which combines all modules into one single file, so has this something to do with the error ?
Any help on this is highly appreciated. Thanks
Adding on I am using Require JS for loading my libs but then at the production I am using almond, which combines all modules into one single file, so has this something to do with the error ?
Yes, it does. Almond cannot do dynamic loading. In other words, everything you want Almond to load must be into a single bundle of modules. You cannot use a CDN with Almond.
"No dynamic loading" is the first restriction in its list of restrictions.
I'm working on a project using requirejs and I'm trying to optimize my javascript into two files: vendor libraries and app code. Unfortunately, I can't seem to get it to work.
Folder structure:
backbone_components/
app/
less/
js/
component1/
component2/
layouts/
dashboard/
about/
lib/
config.js
main.js
index.html
dist/
Gruntfile.js
config.js:
require.config({
baseUrl: '../js/',
paths: {
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/lodash/dist/lodash',
backbone: '../../bower_components/backbone/backbone',
text: '../../bower_components/requirejs-text/text'
},
enforeceDefine: true
});
define(['backbone', 'main'], function(Backbone, app) {
});
Gruntfile.js:
requirejs: {
options: {
dir: 'dist/js/',
mainConfigFile: 'app/js/config.js',
optimize: 'none',
normalizeDirDefines: 'all',
skipDirOptimize: true
},
dist: {
options: {
modules: [
{
name: 'vendor',
include: ['jquery', 'underscore', 'backbone', 'text'],
},
{
name: 'app',
exclude: ['vendor']
}
]
}
}
});
When I run grunt, I get the following error: "Error: Error: ERROR: module path does not exist: /path/to/project/app/js/app/js/vendor.js for module named: vendor."
Why is it looking for "vendor" when it doesn't exist yet?
I take it that you have no module named vendor in the source you want to optimize. If this is correct, then the error you are getting is because r.js is looking for a module named vendor. You have to tell it to create it with the create option:
modules: [
{
name: 'vendor',
create: true, // <--- Add this option!
include: ['jquery', 'underscore', 'backbone', 'text']
},
{
name: 'app',
exclude: ['vendor']
}
]
Without the option r.js understands you to be effectively saying "take the vendor module and include with it jquery, etc." With the option, you are telling it to create vendor from scratch.
The create option is documented in this file.
I recently switched to ember-data#canary, then r.js started failing.
[Error: Error: ENOENT, no such file or directory
'/scripts/lib/ember-data/ember-data/core.js'
In module tree:
app/main
app/app
ember-data
at Object.fs.openSync (fs.js:427:18)
]
This is the build configuration file
`File: build.js`
var config = {
mainConfigFile: '/scripts/common.js',
}
This is the requirejs configuration file
requirejs.config({
paths: {
ember: 'ember/ember',
jquery: 'jquery/dist/jquery',
requirejs: 'requirejs/require',
handlebars: 'handlebars/handlebars',
'ember-data': 'ember-data/ember-data',
},
shim: {
ember: {
deps: [
'handlebars',
'jquery'
],
exports: 'Ember'
},
'ember-data': {
deps: [
'ember'
],
exports: 'DS'
},
}
});
This is how i use ember-data:
define(['ember', 'ember-data'], function(Ember, DS) {
});
You can see the ember-data canary builds here.
This bug have meet from ember-data 1.0.0-beta.9, because in this version has been updated function require in sources. You can revert to beta.8 or try to fix this problem with plugin derequire (grunt-derequire, gulp-derequire).
I've fix it with this task:
gulp.task('build-derequire', function() {
return gulp.src([paths.src.common + '/bower_components/**/ember-data*.js'])
.pipe($.derequire([
{
from: 'require',
to: '_dereq_'
},
{
from: 'define',
to: '_defi_'
}
]))
.pipe(gulp.dest(paths.dev_dist + '/scripts/lib'));
});
I'm using a combination of Backbone, RequireJS & Backbone-MVC (http://chance-an.github.io/backbone-mvc/#root/index).
But when I'm trying to use Backbone-MVC it returns a null.
Here's a list with all my javascript files
Main: http://pastebin.com/Pg0s73cH
App: http://pastebin.com/x4XFxPEG
Router: http://pastebin.com/0ADCn4SV
When I console log the MVC variable in Router it returns a null.
Can somebody find the problem?
Thanks!
you try with this code.
require.config({
paths: {
jquery: 'libs/jquery/jquery-min',
bootstrap: 'libs/bootstrap/bootstrap-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
backbonemvc: 'libs/backbone/backbone-mvc',
templates: '../templates'
},
shim:{
'backbone': {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
'backbonemvc': {
deps: ["backbone"],
exports: "MVC"
}
}
});
The shim config can be wrong.