Welcome to Part 7 of this review of the Pluralsight course “Creating a JavaScript Development Environment” by Cory House.
Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.
He believes in clean code, pragmatic development, and responsive native UIs.
He has also created reactjsconsulting.com, and has the authored Pluralsight courses including Building Applications with React and Flux and Building Applications with React and Redux in ES6.
Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy
Bundling
Module Formats
There are 5 module formats to choose from:
IIFE
Asynchronous Module Definition (AMD)
CommonJS (CJS)
Universal Module Definition (UMD)
ES6 Modules
Cory says Globals, IIFEs and AMD should be considered obsolete. Use CommonJS for Node, and ES6 Modules if you are using ES6.
Why ES6 Modules?
Cory explains the benefits of ES6 modules. They are Standardized and Statically analyzable. They are many features enabled by stically analyzable code. ES6 modules are also easy to read.
Choosing a Bundler
We learn about all of the popular JavaScript bundlers, starting with Require.js
For further information on Require JS, see Require JS Dependency Injection and Module Loading.
Cory lists the following options as modern bundlers:
– Browserify (first bundler to reach mass adoption, bundling npm packages for the web)
– Webpack (bundles file types besides JS and has built in hot-reloading)
– Rollup (offers tree shaking to remove unused code, faster at loading production code)
– JSPM (uses SystemJS module loader and Rollup, can load modules at runtime)
For further information on Browserify see Creating JavaScript Modules with Browserify.
Cory chooses webpack for this course, saying it offers hot module reloading, and bundle splitting so that users download different bundles for different sections of our apps.
To learn webpack with Joe Eames see Webpack fundamentals
Or if you have an egghead.io subscription see Using Webpack for Production Javascript Applications by Kent C. Dodds.
Kent’s course also includes information on new advanced features.
78% of respondents to Cory’s poll say they are using Webpack.
Demo: Configuring Webpack
Webpack bundles all of our files together for our target environment. We create a webpack.config.dev.js file. You can find the code at bit.ly/2dSZwea and Cory describes all the settings here.
This is a basic webpack config. You can see a more sophisticated setup by watching his React and Redux course
Demo: Configure Webpack with Express
We open srcServer.js again and add imports for webpack and our config file. We then use ‘webpack-dev-middleware’.
Our demo app doesn’t do anything except say hello world at this point, so we fix this next.
Demo: Create App Entry Point
We create an index.js file with some code in it. When we run up the app in the console we see “I would pay $1,000.00 for this awesome course!”
We look at the bundle.js file that webpack has created for us and see that it is ES5 code. So Babel has done that for us.
Demo: Handling CSS with Webpack
We create an index.css file with a couple of styles, and import it into our index.js. We see that our Hello World! message now has a new font.
Cory show us how this works behind the scenes using Chrome Dev Tools. The CSS rules are a JavaScript string which is injected onto the page.
The transpiled and bundled JS code looks a whole lot different to what we actually wrote. How can we debug this?
Sourcemaps
Sourcemaps map code back to the original source, and they can be created as part of our build.
Demo: Debugging via Sourcemaps
In the demonstration Cory uses the devtool setting ‘inline-source-map’.
For details on the various sourcemap settings in WebPack see http://webpack.github.io/docs/configuration.html#devtool
Zombie Code Kill 