I have just started looking at browserify and am wondering what is the recommended way to require the min versions of dependencies when building for production and the debug ones when building for development?
For example, I have followed the tutorial here - http://www.sitepoint.com/getting-started-browserify/ and ended up with the following files:
jsmain.js
var names = require('./names.js'),
findSuperman = require('./findsuperman.js');
if (findSuperman(names())) {
document.write('We found Superman');
} else {
document.write('No Superman...');
}
jsnames.js
module.exports = function () {
retu ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
}
jsfindsuperman.js
var _ = require('underscore');
module.exports = function (values) {
var foundSuperman = false;
_.find(values, function (name) {
if (name === 'Clark Kent') {
console.log('It's Superman!');
foundSuperman = true;
} else {
console.log('... No superman!');
}
});
retu foundSuperman;
}
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Find Superman</title>
</head>
<body>
<script src="js/findem.js"></script>
</body>
</html>
package.json
{
"name": "FindSuperman",
"version": "0.0.1",
"author": "Patrick Catanzariti",
"description": "Code designed to find the elusive red blue blur",
"dependencies": {
"underscore": "*"
},
"devDependencies": {
"browserify": "*",
"grunt": "*",
"grunt-browserify": "*",
"grunt-contrib-watch": "*"
},
"scripts": {
"grunt": "grunt"
}
}
gruntFile.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify', 'watch']);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
main: {
options: {
browserifyOptions: {
debug: true
}
},
src: 'js/main.js',
dest: 'js/findem.js'
}
},
watch: {
files: 'js/*',
tasks: ['default']
}
});
}
Ruing npm run grunt creates js/findem.js, which includes the debug version of the underscore package (and also starts the watcher).
But I would also like to have js/findem-min.js - the min version intended for production and which should include the min version of the underscore package.
And here there are a few things I need to understand. Indeed:
require('underscore')maps to the debug version. There does not seem to berequire('underscore-min'). Seems like one has to resort torequire('underscore/underscore-min.js'). Am I correct?- How to require different things conditionally depending on the production or development build, but only when browserifying? The final js file (jsfindem.js or jsfindem-min.js) should require the right thing unconditionally, of course.
- Should I also have index-min.html? Does not seem right. So, I should have one index.html which loads either jsfindem.js or jsfindem-min.js? Since I caot have both at the same time I need to serve index.html as a dynamic content rather than a static file. Something like a jade template with the name of the js file being either jsfindem.js or jsfindem-min.js depending on the startup parameters (NODE_ENV=development comes to mind). Am I correct?
I would like to know whether I understand correctly the items 1 and 3, but I do not have an answer for item 2. What is the recommended way (the best practice, if you please) to do it? I might have gotten items 1 and 3 wrong as well, so please, correct me if I am wrong there.
