How To Use Babel JS In ASP.NET MVC 5

Today, we will learn about using Babel.js in ASP.NET MVC 5. With Babel.js we can use latest JavaScript concepts which can be easily used in old browsers also.

What is Babel.js?

Babel.js is a JavaScript transpiler which converts the new JavaScript syntaxes into the one which can be used by old browsers also. So, the new JavaScript syntax can be used on both, new and old browsers.

Let’s get started with integrating Babel.js in our ASP.NET MVC 5 application.

Roadmap for developing the application

• Creating the new ASP.NET MVC 5 application
• Setup NPM configurations and packages
• Installing Webpack and babel
• Creating some ES6 files with latest syntaxes.
• Monitoring file changes with npm watch
• Configuring the Webpack file and package.json file
• Code in action

Creating the new ASP.NET MVC 5 application

Create a new ASP.NET MVC 5 application in which you have to integrate Babel.js or take any existing ASP.NET MVC 5 application

Setup NPM configurations and packages

Open the command prompt and go to the root folder of the project. Create a new package.json file by typing the following command in it. You need to include the package.json file in the application from the solution explorer.

npm init -y

Installing Webpack and babel

Now, in the root directory of your project, type the following commands from the command prompt.

npm install --save-dev webpack babel-core babel-loader babel-polyfill babel-preset-env

npm install @babel/core --save

Above commands will install necessary packages for Babel and Webpack.

Creating some ES6 files with latest syntaxes.

Now, create a new folder as Custom in the script folder and add HelloWorld.js and Main.js file in it.

HelloWorld.js file:

export default class HelloWorld {
    sayHello() {
        console.log("Hello Babel JS");
    }
}

Main.js file:

import HelloWorld from "./HelloWorld"

new HelloWorld().sayHello();

Monitoring file changes with npm watch

Open the command prompt on root directory of your project and add the following package in it.

npm install --save-dev npm-watch

Configuring the Webpack

Create a new file as webpack.config.js on the project root.

Open the webpack.config.js file and add the following lines in it.

const path = require('path');

module.exports = {
    entry: {
        Main: './Scripts/Custom/Main.js',
    },
    output: {
        path: path.join(__dirname, './Scripts/Build'),
        filename: '[name].bundle.js',
    },
    mode: 'development'
}

We can use as many files in the entry point. The name of the file will be the key you used in the entry point. So in my scenario, the file which will be generated will be Main.bundle.js file

Open the package.json file and modify it.

{
  "name": "BabelJSMVC5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "npm-watch"
  },
  "watch": {
    "build": "Scripts/Custom/*.js"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "keywords": [],
  "author": "Shaikh Irshad",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "npm-watch": "^0.6.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@babel/core": "^7.10.3"
  }
}

Run the following command in the command prompt in your project root directory.

npm run watch

It will watch for changes in the JS files included in the webpack.config.js and will re-build it.

You will notice that one folder named Build will be added in your Script folder where you will be having your Main.bundel.js file.  You can give the refrence to the Index.cshtml file like this.

@{
    ViewBag.Title = "Home Page";
}

@section Scripts{
    <script src="~/Scripts/Build/Main.bundle.js"></script>
}

Code in action