While using Browserify to bundle all your JavaScript files into a single app.bundle.js file, come the time for debugging, it is very difficult to locate the exact source file where an exception occurred from the single giant file.
That's where a source map that you create (say during development) comes handy to quickly locate which source file is throwing the exception. The source map is just a mapping (dictionary) of the actual source files that helps us identify the source files without actually loading them in the browser.
To create a source map, you can issue the following command when you create the bundle from the command line, using --debug (shorthand is -d)
C:\Projects\MyApp> browserify src/js/app.js -o dist/js/app.bundle.js --debug
With Browserify, it creates this source map within the app.bundle.js file after encoding it as data-url (for the browser to recognize) it at the end of the file.
Since this increases the size of the file, it is recommended to turn it off before deploying to Production.
On the same note, to ease development so we don't have to manually run browserify every time a change is made, install watchify which is available as node package. This is just like brunch watch if using brunch to build your js files.
npm install -g watchify
So after installing it run this command just once with the -v option to watch verbosely
C:\Projects\MyApp> watchify src/js/app.js -o dist/js/app.bundle.js --debug -v
Now as your project and the build process gets more complicated, you might like to not only browserify and watchify your JavScript files, but use a build task runner like Gulp or Grunt. This is so you can lint your files, browserify it, mimimize it, add any less or sass files for styling etc. If using a task runner, you would have the task runner create a task to run browserify. We could still use watchify when using Grunt to automatically rebuild the files, but Grunt also comes with its own GruntWatch node module. This can be created as a grunt.loadNpmTasks()
No comments:
Post a Comment