Modularisation

Configuring the project

In order to use ES6 imports, we need to modify our package.json. Add a new line like this:

{
  "name": "health-tracker",
  "version": "1.0.0",
  "type": "module", 
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "hello": "echo \"Hello, world!\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "mocha": "^10.2.0"
  }
}

INFO

The other style of importing is called CommonJS and is older than the ES6 style. We're recommending ES6 as CommonJS will eventually be deprecated.

Named and default exports

We can use the export keyword to make const, function and class available in other files in our project.

We import named exports with {}, but we don't need {} to import default exports.

a.js

export const x = 7
export const y = 12

const msg = 'Hello from a.js!'
export default msg

b.js

import { x, y } from './a.js'
import msg from './a.js'

console.log(x + y)
console.log(msg)

output

19
Hello from a.js!

Structuring the project

Let's suppose we're organising our code into classes:

• DiaryEntry to monitor our wellbeing
• Meal to track our meals
• Workout to log our exercise

We usually put these types of classes in to a folder called models.

bash

mkdir models
cd models
touch DiaryEntry.js Meal.js Workout.js

output

health-tracker/
├── models
│   ├── DiaryEntry.js
│   ├── Meal.js
│   └── Workout.js
├── .gitignore
├── node_modules/
├── package.json
└── package-lock.json

Exporting the classes

We'll just put a bit of starter code in each one to begin with:

DiaryEntry.js

class DiaryEntry {
  constructor(txt, mood) {
    this.txt = txt
    this.mood = mood
  }
}

export default DiaryEntry 

Meal.js

class Meal {
  constructor(name, calories) {
    this.name = name
    this.calories = calories
  }
}

export default Meal 

Workout.js

class Workout {
  constructor(activity, time) {
    this.activity = activity
    this.time = time
  }
}

export default Workout 

Note the use of export default at the bottom of each file. This allows us to export the class and use it in a different file.

Importing the classes

Let's create a file called app.js in the root of the health-tracker project. We will import our classes here and play around with them.

bash

touch app.js

output

health-tracker/
├── app.js
├── models
│   ├── DiaryEntry.js
│   ├── Meal.js
│   └── Workout.js
├── .gitignore
├── node_modules/
├── package.json
└── package-lock.json

In app.js, we'll import the three classes:

app.js

import DiaryEntry from './classes/DiaryEntry.js'
import Meal from './classes/Meal.js'
import Workout from './classes/Workout.js'

// Now we can use our classes in app.js!
const entry = new DiaryEntry('I am learning Node!', 8.9)
const meal = new Meal('Aubergine curry', 1250)
const workout = new Workout('Yoga', 30)

console.log(entry)
console.log(meal)
console.log(workout)

output

DiaryEntry { txt: 'I am learning Node!', mood: 8.9 }
Meal { name: 'Aubergine curry', calories: 1250 }
Workout { activity: 'Yoga', time: 30 }