Blog: A SIMPLE Guide to JavaScript Code-splitting with ES5 and ES6 - import, export, export default, require, and module.exports

import, export, export default... What's the difference, and how do you use them? In this article, I explain code-splitting in ES5 and ES6.

Image of a road junction *Matt Seymour - Unsplash)

This topic took me a long time to understand, and I wish someone had written a guide like this when I was learning. So here it is!

ES6 - import and export

ES6 is mainly used in front-end development. I’ve been using it in React. It is not supported out-of-the-box on Node.JS.

There are two ways to set an export in ES6 - “default exports” and “named exports”.

Default Exports

Default exports are declared like this: export default SomeThing. This exports any variable you have named SomeThing. You can only use one default export per file.

To import a default export, simply use the following: import SomeThing from './path/to/export'. To create an alias (giving a new name to the module), you can replace SomeThing with whatever you like - it does not have to match the export. This would work too: import MyThingymajig from './path/to/export'. You'd then use MyThingymajig to access your module.

Named Exports

Named exports are declared like this: export function Xyz() {...} or export variableName. They can be used in conjunction with a default export, and you can have multiple named exports per file.

To re-iterate: you can have only one default export, but multiple named exports, per file. You can also mix the two, having one default and multiple named.

To import a named export, simply use the following: import { Xyz } from './path/to/export'. To create an alias, use the following: import { Xyz as Abc } from './path/to/export' (note the keyword as)*. The *non-aliased variable name inside the curly braces must match the exported variable name.

You can import multiple named exports from one file like this: import { Xyz, Yza, Zab } from './path/to/export. And, you can go even further, and combine these with aliasing: import { Xyz as Abc, Yza as Bcd, Zab } from './path/to/export.

Default Exports Have A Secret...

Default exports are actually just named exports with the name default. Therefore, import MyAlias from './path/to/export' is the same as import { default as MyAlias } from './path/to/export'.

Combining Default and Named Exports

Both types of exports can be combined to make importing a little less verbose. You can import default and named exports from a single file like this: import { Xyz }, SomeThing from './path/to/export’. And, this can be combined with aliasing: import { Xyz as Abc }, MyThing from './path/to/export’.

ES5 - module.exports and require

ES5 makes things a little bit less simple. Unfortunately, it’s not possible to use ES6 imports with Node.JS out-of-the-box, so most of the time, you'll be stuck with ES5. TypeScript and Babel both support ES6. It’s good to remember that module.exports is either an object or a variable, which means default and named exports cannot be used together.

Default Exports

Default exports are declared like this: module.exports = SomeThing.

To import a default export, use this: const SomeThing = require('./path/to/export'). To create an alias, you need to use object destructuring: const { NewThing: SomeThing } = require('./path/to/export').

Named exports are a little more complex.

Named exports

Named exports are declared like this: module.exports = { ThingOne, ThingTwo }. You can go further and rename your exports - here’s an example where ThingOne becomes ThingX: module.exports = { ThingX: ThingOne, ThingTwo }.

To import a named export, use this: const ThingX = require('./path/to/export').ThingX. To create an alias, do this: const StillThingX = require('./path/to/export').ThingX.

To import multiple named exports, use this: const { ThingX, ThingTwo } = require('./path/to/export'). This reads the ThingX and ThingTwo properties from the module.exports statement inside ./path/to/export, and assigns them to the variables ThingX and ThingTwo (that's object destructuring!).

To import multiple named exports with aliases, use this: const { ThingX, ThingTwo: ThingY } = require('./path/to/export'). This imports ThingX as usual, and imports ThingTwo as ThingY.

Combining Default and Named Exports

Sometimes, you’ll want to combine a default export and various named exports. This is where it gets a little confusing, as this isn’t technically possible with ES5 require. ES5 exports must either be a single default export, or an object of named exports.

With ES5, I recommend using named exports as often as possible, as it’ll make things a little simpler to understand. With ES6, you can make your own rules.

Thank you for reading! Please check out my portfolio and get in contact if you have any questions.