in our require.js and backbone.js app we use many views and templates.
in a buildstep we want to inline the templates with the appropriate view shims and remove the text plugin from the build in the process.
is that even possible?
That is automatically taken care of by RrequireJs when you run their r.js utility.
There's no additional effort involved to 'inline' the templates.
As long as your templates are defined like so:
define ( ['text!templates/my.html'], function(myTemplate){})
Running r.js -o app.build.js will inline all your text!templates/my.html into its own string in your optimized javascript file. Here's a sample of my app.build.js
({
appDir: "../project-directory",
baseUrl: ".",
dir: "../../optimized",
modules: [
{
name: "js/bootstrap"
}
],
paths: {
text: 'js/libs/amd/plugins/text',
order: 'js/libs/amd/plugins/order',
jquery: 'js/libs/jquery-1.7.1',
underscore: 'js/libs/underscore',
backbone: 'js/libs/backbone',
'jquery.mobile.router': 'js/libs/jquery.mobile.router'
},
optimize: 'uglify',
optimizeCss: "standard"
})
RequireJS is smart enough to inline your dependencies prefixed with text!. In other words, the text plugin is only used in your development version. The optimized version will not require the text plugin.
If you're interested in more details, you'll find the instructions to optimize your project on RequireJS's site. You can also find a detailed sample of the build file with all possible options documented here
Related
I am integrating Require.js to AngularJS based web application for performance improvement.
I've imported require.conf in index.html:
<script src="bower_components/requirejs/require.js" data-main="require-conf.js">
Here is code snippet of require-conf.js:
require.config({
paths: {
'jquery': '...',
'Angular': '...',
....
'libs' : 'src/libs.js'
},
shim: {
'Angular': { exports: 'Angular'},
'libs' : ['Angular']
....
}
}
require(
[
'jquery',
'angular',
'app',
'libs',
], function (jquery, angular) {
angular.bootstrap(['app'])
}
);
Here, libs.js is the library I've built by webpack. Some plugins and libraries are concatenated in this file.
Here is webpack configuration code snippet to build libs.js.
In webpack.config.js
plugins: [
new ConcatPlugin({
fileName: 'libs.js',
filesToConcat: [
'./src/utils/bootstrap-plugins.min.js',
'./src/libs/angular-bootstrap-datetimepicker/datetimepicker.js',
'./src/libs/angular-bootstrap-datetimepicker/datetimepicker.templates.js',
'./src/libs/angular-fusioncharts/fusioncharts.js',
'./src/libs/angular-fusioncharts/angular-fusioncharts.min.js',
'./src/libs/angular-fusioncharts/types/fusioncharts.charts.js',
'./src/libs/angular-ui-tour/angular-ui-tour.js',
'./src/libs/JQ_CONFIG/flot/jquery.flot.js',
'./src/libs/JQ_CONFIG/flot/jquery.flot.pie.js',
'./src/libs/JQ_CONFIG/flot/jquery.flot.resize.js',
'./src/libs/JQ_CONFIG/flot-spline/js/jquery.flot.spline.min.js',
'./src/libs/JQ_CONFIG/flot.orderbars/js/jquery.flot.orderBars.js',
'./src/libs/JQ_CONFIG/flot.tooltip/js/jquery.flot.tooltip.min.js',
'./src/libs/JQ_CONFIG/footable/dist/footable.all.min.js',
'./src/libs/JQ_CONFIG/html5sortable/jquery.sortable.js',
'./src/libs/jquery-ui-draggable/jquery-ui-draggable.min.js',
'./src/libs/ng-table/ng-table.js',
'./src/libs/StickyTableHeaders/jquery.stickytableheaders.js',
'./src/libs/ng-quill/quill.js',
'./src/libs/ng-quill/ng-quill.js',
].map(function(fileName) {
return path.resolve(__dirname, fileName);
}),
But, App can't recognize the modules inside libs.js:
Module 'ngquill' is not available! you either misspelled the module
name or forgot it to load it. If registering a module ensure that you
specify the dependencies as the second argument.
Require.js can't recognize the modules concatenated by webpack? Is there any solutions to fix this problem?
You cannot combine AMD modules into a single file just by concatenating them into a single file. When you combine multiple modules into a single file, the modules must get hardcoded names. When you have a single module in a single file, the define for it can be:
define([ ... deps ... ], function (...) {
In this case, RequireJS infers the name of the module from the name under which it was requested.
When you combine multiple modules in a single file, the define calls must be of the form:
define("foo", [ ... deps ...], function (...) {
define("bar", [ ... deps ...], function (...) {
// etc.
The first argument to define is a string, which tells RequireJS which module is being defined. This is necessary because otherwise RequireJS won't know which module is which. This is why you cannot just concatenate.
You most likely could write a Webpack configuration that could both transform the files as I described above and concatenate them. However, that's rife with hurdles. For instance the runtime shim configuration require special handling at build time. In the end you may end up replicating the functionality of RequireJS' optimizer. I would suggest using RequireJS' optimizer instead of reinventing the wheel.
I'm exploring the idea of using Webpack with Backbone.js.
I've followed the quick start guide and has a general idea of how Webpack works, but I'm unclear on how to load dependency library like jquery / backbone / underscore.
Should they be loaded externally with <script> or is this something Webpack can handle like RequireJS's shim?
According to the webpack doc: shimming modules, ProvidePlugin and externals seem to be related to this (so is bundle! loader somewhere) but I cannot figure out when to use which.
Thanks
It's both possible: You can include libraries with a <script> (i. e. to use a library from a CDN) or include them into the generated bundle.
If you load it via <script> tag, you can use the externals option to allow to write require(...) in your modules.
Example with library from CDN:
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }
// inside any module
var $ = require("jquery");
Example with library included in bundle:
copy `jquery-git2.min.js` to your local filesystem
// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }
// inside any module
var $ = require("jquery");
The ProvidePlugin can map modules to (free) variables. So you could define: "Every time I use the (free) variable xyz inside a module you (webpack) should set xyz to require("abc")."
Example without ProvidePlugin:
// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);
Example with ProvidePlugin:
plugins: [
new webpack.ProvidePlugin({
"_": "underscore"
})
]
// If you use "_", underscore is automatically required
_.size(...)
Summary:
Library from CDN: Use <script> tag and externals option
Library from filesystem: Include the library in the bundle.
(Maybe modify resolve options to find the library)
externals: Make global vars available as module
ProvidePlugin: Make modules available as free variables inside modules
Something cool to note is that if you use the ProvidePlugin in combination with the externals property it will allow you to have jQuery passed into your webpack module closure without having to explicitly require it. This can be useful for refactoring legacy code with a lot of different files referencing $.
//webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
};
now in index.js
console.log(typeof $ === 'function');
will have a compiled output with something like below passed into the webpackBootstrap closure:
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function($) {
console.log(typeof $ === 'function');
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = jQuery;
/***/ }
/******/ ])
Therefore, you can see that $ is referencing the global/window jQuery from the CDN, but is being passed into the closure. I'm not sure if this is intended functionality or a lucky hack but it seems to work well for my use case.
I know this is an old post but thought it would be useful to mention that the webpack script loader may be useful in this case as well. From the webpack docs:
"script: Executes a JavaScript file once in global context (like in script tag), requires are not parsed."
http://webpack.github.io/docs/list-of-loaders.html
https://github.com/webpack/script-loader
I have found this particularly useful when migrating older build processes that concat JS vendor files and app files together. A word of warning is that the script loader seems only to work through overloading require() and doesn't work as far as I can tell by being specified within a webpack.config file. Although, many argue that overloading require is bad practice, it can be quite useful for concating vendor and app script in one bundle, and at the same time exposing JS Globals that don't have to be shimmed into addition webpack bundles. For example:
require('script!jquery-cookie/jquery.cookie');
require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history');
require('script!momentjs');
require('./scripts/main.js');
This would make $.cookie, History, and moment globally available inside and outside of this bundle, and bundle these vendor libs with the main.js script and all it's required files.
Also, useful with this technique is:
resolve: {
extensions: ["", ".js"],
modulesDirectories: ['node_modules', 'bower_components']
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)
]
which is using Bower, will look at the main file in each required libraries package.json. In the above example, History.js doesn't have a main file specified, so the path to the file is necessary.
Following one of the chapters of "Developing Backbone.js Apllication" by Addy Osmani (O'Reilly) about Grunt-BBB (Backbone Boilerplate Buddy), I just couldn't manage to create a build profile.
Here is the filesystem tree used for this :
/builds
/closure
/rhino
/config
/build.js
build.sh
/development
/* Grunt-BBB files after init */
/app
/styles
index.css
app.js
config.js
main.js
router.js
/test
/* Not important files used for testing */
/vendor
/h5bp
/css
main.css
normalize.css
/jam
/backbone
backbone.js
package.json
/bakbone.layoutmanager
bakbone.layoutmanager.js
package.json
/jquery
jquery.js
package.json
/lodash
lodash.js
lodash.min.js
lodash.underscore.min.js
package.json
require.config.js
require.js
/js
/libs
almond.js
require.js
/distribution
/* Empty dist directory where the optimized / minified / concatenated files should go */
Here are the steps I followed in the /development directory :
1) Install Grunt-BBB (npm install -g bbb)
2) Download r.js, a part of the Require.js project (git clone https://github.com/backbone-boilerplate/grunt-bbb)
3) Initialize the files of the boilerplate (bbb init)
Here is the build.js file I used to configure the r.js AMD loader for the Google Closure compiler :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
modules: [
{
name: 'main'
}
],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
and this is the build.sh file I use :
#!/usr/bin/env bash
# r.js directory
RJSDIR="r.js"
RJS="$RJSDIR/dist/r.js"
# Rhino directory
RHINODIR="rhino"
RHINO="$RHINODIR/js.jar"
# Google Closure Compiler directory
CLOSUREDIR="closure"
CLOSURE="$CLOSUREDIR/compiler.jar"
# Build config directory
CONFIGDIR="config"
CONFIG="$CONFIGDIR/build.js"
# Launch compillation
java -Xms256m -Xmx256m -classpath "$RHINO":"$CLOSURE" org.mozilla.javascript.tools.shell.Main "$RJS" -o "$CONFIG" $#
My goal is to optimize, minify, concatenate all the JavaScrit file including the libraries and templates (which I don't have yet, I am only using the boilerplate files) but also CSS files.
The result I get by running ./build.sh is that every files are correctly minimised (besides CSS rule inlining, but that is besides the point) and concatenated but resources that are loaded and managed by the Jam (package manager that combines NPM and Require.js) aren't concatenated.
The reason for that since they are already loaded / managed by Jam, they are not redeclared in the JavaScript files AMD style.
In conclusion, my questions are the following :
How can I rewrite my build.js configuration file so that resources that are loaded by Jam also get included and concatenated in the release / dist file ?
How can I make it so that the concatenated resources aren't copied in the realse / dist directory ? Is it possible to configure this in the build.js file or should this go in my build.sh file ?
Edit : New build.js file :
({
appDir: '../../development',
baseUrl: 'app',
dir: '../../distribution',
optimize: 'closure', // 'uglify2'
paths: {
requirejs : '../vendor/jam/require',
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
name: 'main',
include: ['requirejs'],
onBuildRead: function(moduleNames, path, contents) {
return contents;
//return contents.replace(/console\.log\(([^\)]+)\);/g, '')
// .replace(/debugger;/, '');
}
})
And here is the error :
file:///vendor/js/libs/require.jsFailed to load resource: The requested URL was not found on this server.
file:///app/styles/index.cssFailed to load resource: The requested URL was not found on this server.
require.js is never included by r.js unless you instruct it to do so. See this link:
http://requirejs.org/docs/optimization.html#onejs
The link refers to command-line options, but the build file options are broadly the same:
you need to define a dummy module for require.js in your paths:
paths: {
requireLib : '/path/to/require.js'
backbone: '../vendor/jam/backbone/backbone',
'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
jquery: '../vendor/jam/jquery/jquery',
lodash: '../vendor/jam/lodash/backbone.min'
},
and include it:
name "main",
include: ["requireLib"],
You can ensure that allnested dependencies are resolved by setting:
findNestedDependencies: true,
You can configure an output path using 'out' in your build file
out: "path/to/my/builtfile-1.0.0.js",
Sorry I don't know enough about jam to say whether jam would override this setting
_Pez
I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})
With require.js, can you specify the order! plugin to be used within the 'paths' config object? I'm trying to avoid having to type 'order!' for several base modules that I always want included in a certain order.
My config:
require.config({
paths: {
jquery: 'libs/jquery/jquery-1.7.2.min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
order: 'libs/require/plugins/order'
}
});
I tried it this way, but it included the 'order!' string in the actual path it was looking up.
require.config({
paths: {
jquery: 'order!libs/jquery/jquery-1.7.2.min',
underscore: 'order!libs/underscore/underscore-min',
backbone: 'order!libs/backbone/backbone-min',
order: 'libs/require/plugins/order'
}
});
Check out the AMD forks of Backbone and Underscore, maintained by James Burke who created RequireJS. If you use these versions then you won't have to use the order plugin!
More info about these forks...