Modules

Before we get started looking at Modules, we need to change the Gulp and Babel files that we set up earlier to allow us to work with modules. We need to add four new modules: browserify, babelify, vinyl-source-stream, and vinyl-buffer.

Support for Modules in browsers does not quite exist in the browser. Even though ES6 introduces modules in the language so we need to use something to transpile and bundle them. There are many popular module bundler’s out there, in this book we will look at Browserify.

Browserify is a popular module loader. It allows you to take npm modules, or our own modules, and bundle them up into a single file! It takes the require functions from node and, as they say “recursively analyze all our dependences” in order and serve up a single file.

However if we are going to use the ES6 import and export keywords we need to first transform our code. Enter Babelify, this is a transformer for Browserify that will take our ES6 and make it work well together.

The vinyl-source-stream and vinyl-buffer modules are used to take the output from Browserify and gather it all up so that we can put it all in one file. The output is a stream, and we can used these to property pull everything together.

To get started make sure you have read the Using ES6 now chapter, as we will have a similar set up. You can also find the files for this and the previous example on GitHub at https://github.com/lets-learn.

Make sure you navigate towards a folder you would like work in, to get started let’s install our npm modules.