اکما اسکریپت 6 در ASP.Net MVC

 

Step 1 : Create New ASP.Net MVC Web Application

Step 2 : Go to project root folder and create package.json

> npm init –y

Step 3 : Install Web Pack and Babel

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

Step 4 : Include package.json to project.

Step 5 : Create some es6 scripts.

export default class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

 

speak() {

console.log(`Hi I’m ${this.name} and ${this.age} years old and I am awesome`);

}

}

import Person from ‘./person’;

 

var person = new Person(“David”, 20);

person.speak();

Step 6 : Create Controller and view, and then include bundle.js

<script src=”~/Scripts/build/bundle.js”></script>

Step 7 : Create webpack.config.js in project’s root folder.

const path = require(‘path’);

 

module.exports = {

entry: [‘./Scripts/es6/main.js’],

output: {

path: path.resolve(__dirname, ‘./Scripts/build’),

filename: ‘bundle.js’

},

// IMPORTANT NOTE: If you are using Webpack 2 or above, replace “loaders” with “rules”

module: {

loaders: [{

loader: ‘babel-loader’,

test: /\.js$/,

exclude: /node_modules/

}]

}

}

Step 8 : add webpack for building in package.json

“scripts”: {

“build”: “webpack”

},

Step 9 : configure Babel :

“babel”: {

“presets”: [ “env” ]

},

Step 10 : Add Watch and Watch the project changes

“watch”: {

“build”: “Scripts/es6/*.js”

},

“scripts”: {

“watch”: “npm-watch”,

“build”: “webpack”

},

Run Command to watching :

npm install –save-dev npm-watch

Step 11 : Run project with npm :

npm run build

Step 12 : Run Project by pressing F5

You must see the message in console by pressing F12.

Leave a Reply