Konfigurasi Typescript dengan Babel, Mocha dan Webpack – Pada artikel kali ini kita akan mempelajari bagaimana konfigurasi typescript dengan babel, mocha dan webpack. Pada setiap pengembangan perangkat lunak seperti web, aplikasi mobile dan lainnya akan memiliki tahap yang penting dan krusial yaitu setup pada suatu development environment. Disini Anda akan mengenal tahap-tahap yang diperlukan untuk set up untuk projek pengembangan web atau web development, terutama bagi anda yang ingin menggunakan typescript dan mocha sebagai unit test framework. Simak lebih lanjut untuk mengetahui tahap-tahap konfigurasi typescript dengan babel, mocha dan webpack.

Daftar Isi

Langkah awal untuk memulai

Pertama, Anda perlu membuat sebuah projek npm baru. Buatlah folder projek dan inisialisasi projek npm menggunakan perintah dibawah ini.

npm init -y

Install library yang dibutuhkan

Install Webpack

npm i -D webpack webpack-cli

Install babel

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

Install typescript

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

Install mocha

npm i -D mocha @types/mocha

Buat File Konfigurasi Projek

Buat file webpack.config.js

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,
    },
  }
];

Buat file .babelrc

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

Buat file tsconfig.testing.json

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

Buat file .mocharc.json

{
  "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"]
}

Tambahkan npm script didalam package.json untuk menjalankan webpack

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

Anda sudah bisa memulai mengembangkan website yang ingin dibuat. Anda juga dapat mengunjugi situs resmi typescript, webpack, babel, dan mocha untuk mempelajari lebih lanjut.

Temukan source code Typescript lainnya hanya di Inpows.

Membuat Algoritma Insertion Sort di Kotlin

Membuat Algoritma Bubble Sort di Kotlin

Membuat Algoritma Binary Search Menggunakan Kotlin

Membuat Algoritma Linear Search di Kotlin