In the preceding chapter, we covered how to take advantage of the new ECMAScript modules to load code from multiple files and organize our code. This cutting-edge technique has only recently become available in browsers. In practice, production websites try to target as many users as possible. This often means targeting older browsers. In addition, JavaScript also runs in other environments (such as Node.js) that do not support ECMAScript modules.

The good news is that we don't have to change our source code in order to support these platforms. There are tools available that produce a single JavaScript file from multiple source files. This way we can use modules to organize our code, and run our programs on more platforms.

The recipes in this chapter focus on installation and configuration of webpack in order to provide a fallback option for platforms that...

Node provides installation binaries for Windows and macOS on its website:
https://nodejs.org/en/download/.

It's easy to install Node.js by downloading the appropriate installer for your OS and processor. However, it is useful to have a version manager so that you can work on projects that require different versions, and use the latest version. This is especially useful if your package manager doesn't provide a recent version of Node.js (for example, Ubuntu).

Subsequent recipes will assume that Node.js is installed. This recipe demonstrates how to install Node.js for Linux and macOS. The next recipe will cover the installation instructions for Windows.

Subsequent recipes will assume that Node.js is installed. This recipe demonstrates how to install Node.js for Windows.

This recipe is meant for the Windows environment. See the previous recipe for macOS and Linux instructions.

You must also have git installed. You can download git from the following link:

https://git-scm.com/download/win.

1. Visit the project release page:
   https://github.com/coreybutler/nvm-windows/releases.
   
2. Download the latest nvm-setup.zip file.
3. Extract the downloaded ZIP.
4. Double-click...

As mentioned before, there are a few options for creating JavaScript bundles. Rollup and Babel are popular tools that can perform this task. The webpack is a good option because it is widely used and has a large plugin base.

This recipe demonstrates how to install and configure webpack to build a JavaScript bundle.

You'll need to have Node.js installed. If not, please see the appropriate recipe for installing Node.js with nvm.

1. Open your command-line application, navigate to your workspace, and create...

In the previous recipe, we showed how to combine multiple modules with webpack. This recipe demonstrates how to load these into browsers that don't support ES modules.

This recipe assumes that you have webpack installed and configured. It is suggested that you complete the previous recipe, Installing and configuring webpack, before continuing with this recipe.

You will also need to have Python installed. If you haven't yet, visit the Installing Python, using SimpleHTTPServer to host a local static file server recipe in Chapter 1, Building with Modules.

In the previous two recipes, we saw how to create a client bundle and load it into a browser. This make it possible to use ES modules in source code without breaking compatibility with older browsers.

However, there are also new methods available in newer versions of the language that we'll be using in later chapters.

This recipe demonstrates how to use the babel-polyfill library to support those methods.

This recipe assumes that you have the code created in earlier recipes in this chapter, and that you have installed Python and know how to start the static HTTP server. Please visit the earlier recipes or copy the code.

In the previous recipe, we saw how to use the babel-polyfill library to support new ES methods. This add methods to the language at runtime, so that source code that depends on them runs correctly.

There are other language features that are relatively new to ECMAScript, such as the arrow function, let and const variable declarations, and spread operators. These features are not universally supported. Babel provides a mechanism to use them at the source level, and remain compatible with a build step.

This recipe demonstrates how to use Babel within webpack, in order to support these features in older browsers.

This recipe assumes that you have the code created in earlier...

A major disadvantage of transpiling and using Polyfills is that the source code can diverge quite dramatically from the source code. This can often result in bloated bundle sizes. If you look at the file size of the bundle.js file after the Polyfill library was added (see the previous two recipes), then you'll see that it is over 200Kb. This is quite large when compared to 5Kb without the Polyfill.

With many bundles, it is difficult to find out what files are responsible for the large file size, and what the dependencies are between them.

In this recipe, we will see how to use analysis tools to get a better perspective on our webpack bundles.

It will be helpful to have...