How to configure Typescript with Webpack, Babel and Mocha
source link: https://dev.to/sukanto113/how-to-configure-typescript-with-webpack-babel-and-mocha-2433
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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,
},
}
];
Enter fullscreen mode
Exit fullscreen mode
2. Create .babelrc
Create .babelrc in the project folder and paste the content below
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
Enter fullscreen mode
Exit fullscreen mode
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",
}
}
Enter fullscreen mode
Exit fullscreen mode
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"]
}
Enter fullscreen mode
Exit fullscreen mode
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"
}
Enter fullscreen mode
Exit fullscreen mode
And then you are ready to start development.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK