How to configure Typescript with Webpack, Babel and Mocha

Setup a development environment is a crucial step in any software development project. If you are looking for how to set up a web development project using typescript and mocha as a unit-test framework this post is for you.

In this post, I will show:

• how to set up a web development environment with typescript.
• how to build the project using webpack and babel.
• how to set up unit-test with mocha.

Get started

Create new npm project

First you need to create a new npm project. Create project folder and initialize npm project.

$ npm init -y

Install required libraries

1. Install webpack

$ npm i -D webpack webpack-cli

2. Install babel

$ npm i -D @babel/core @babel/preset-env babel-loader

3. Install typescript

$ npm i -D typescript ts-node @babel/preset-typescript

4. Install mocha

$ npm i -D mocha @types/mocha

Create configuration files

1. Create webpack.config.js

Create webpack.config.js in the project folder and paste the content below

const path = require("path");

module.exports = [
  {
    entry: "./src/main.ts",
    output: {
      path: path.join(__dirname, "build"),
      filename: "main.js",
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    target: "web",
    node: {
      __dirname: false,
    },
  }
];

2. Create .babelrc

Create .babelrc in the project folder and paste the content below

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

3. Create tsconfig.testing.json

Create tsconfig.testing.json in the project folder and paste the content below

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "lib": ["es2017"],
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",
  }
}

4. Create .mocharc.json

Create tsconfig.testing.json in the project folder and paste the content below

{
  "diff": true,
  "extension": ["js", "ts"],
  "package": "./package.json",
  "reporter": "spec",
  "require": "ts-node/register",
  "recursive": true,
  "slow": 75,
  "timeout": 60000,
  "ui": "bdd",
  "watch-files": ["src/**/*.js", "src/**/*.ts", "test/**/*.js", "test/**/*.ts"]
}

5. Add npm script in package.json to run Webpack

To run Webpack, we have to use npm script with simple command webpack.

"scripts": {
  "build": "webpack",
  "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha"
}

And then you are ready to start development.