protips

Logo

This site lists the protips that we shared with students during our courses

View the Project on GitHub appliedtechnology/protips

Export and import modules in ES6

In ECMAScript 6 there’s a couple of new ways of importing and exporting modules that might look a bit different and unusual at first. It’s really very simple once you get your eyes used to it.

Sidenote - running these examples

If you want to read the code - skip this. If you want to run it - do the following steps.

In order to run these examples, on Node, we need to use Babel Node.

  1. Create a package.json file with npm init -y

  2. Install the babel-packages npm install --save-dev babel-cli babel-preset-env

  3. Copy this

    {
      "presets": ["env"]
    }
    

    Create a file with that content with pbpaste > .babelrc

  4. Add a start script in the package.json like this: "start": "npx babel-node coolFuncs.js" , using the namings in this example

  5. Run the examples with npm start

Default export - one per file

Imagine that we have a file with functions (coolFuncs.js) that contains the following:

function coolFunction() {return 'Pretty fly for a rabbi!'};

export default coolFunction;

Note that there can only be one thing exported default per module.

That last part means that we can import it in another file (coolFuncsClient.js) like this:

import funcs from 'coolFuncs';

console.log(funcs());

We can import this under whatever name I want; import f from 'coolFuncs' would also work (calling it with f() in that case)

Exporting classes

We can export stuff that is not a simple function too. For example like this

class Person {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getAge() { return this.age }
}

export default Person

In that case, we can import and use it like this:

import Person from './coolFuncs';

const p = new Person('Marcus', 46);
console.log(p.get());

Named exports

There can only be one export but there can be many named exports, in addition.

I’ve added a few more functions to the original coolFuncs.js

function coolFunction () { return 'Pretty fly for a rabbi!' };
export function coolerFunction () { return 'Just eat it!' };
export function coolestFunction () { return 'Living in an Amish paradise' };

export default coolFunction;

Notice that we have several exports before two functions, but only one export default

We can now import those functions using the names like this:

import f from './coolFuncs';
import { coolerFunction } from './coolFuncs';
import { coolestFunction } from './coolFuncs';

console.log(f());
console.log(coolerFunction());
console.log(coolestFunction());

Or, we can be fancy, and import everything on one line using EcmaScript 6 destructuring:

import f, { coolerFunction, coolestFunction} from './coolFuncs'

console.log(f());
console.log(coolerFunction());
console.log(coolestFunction());

That first part, outside the curly braces, is the default import that might or might not be there.

Summary - a React example

This type of exporting and importing happens a lot in modern JavaScript / ECMAScript 6. I hope you now understand what is going on better.

As a final repetition - let’s review some React code, that makes use of these features. Here’s a fresh App.js, created with create-react-app. I’m only including some parts of it since just a few lines are interesting for this repetition:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    // code here
  }
}

export default App;

I hope this makes this all a bit clearer.