ES6 setup working environment
Prerequisite :
1.Install Nodejs
2.install text editor. something
like vs code will be sufficient.
3.install gitbas or any cli
terminal.
Setting up:
1.first create a new folder foldername.
2.using the
command line,navigate to this folder (foldername) and run the init
–y command to
initialize your project.
3. using the command line,navigate
to this folder (foldername) and run the npm
install --save-dev babel-core command to initialize your
project.
4. using the command line,navigate
to this folder (foldername) and run the npm
install --save-dev babel-preset-env command to initialize your
project.
5.create a new file .babelrc in the root directory (foldername).
Add the following code in
codeBlock1 to the .babelrc folder
codeBlock1 .babelec
{
"presets":[
"babel-preset-env"
]
}
6. using the command line,navigate
to this folder(foldername)and run the npm
install --save-dev webpack command to initialize your project.
7. using the command line,navigate
to this folder (foldername) and run the npm
install --save-dev babel-loader command to initialize your
project.
8. using the command line,navigate
to this folder (foldername) and run the npm
install --save-dev webpack-cli command to initialize your
project.
9.Create a new folder Src in the
root directory (foldername)
Create a new file index.js in the Src directory
Add the following code in codeBlock2
codeBlock2 index.js
const a=10;
const b=20;
const sum=(a,b)=>a+b;
console.log(sum(a,b));
create a new file webpack.config.js in the Src directory
Add the following code in codeBlock3
codeBlock3 webpack.config.js
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
}
]
}
}
Open the .json file in your text
editor and edit script and add 2 new script following the codeBlock4
Codeblock4
"scripts": {
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
10. Create a new file index.html in
the root directory (foldername)
Add the following code in codeBlock5
codeBlock5 index.html
<!DOCTYPE html>
<head>
<title>Esc</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
11. using the command line,navigate
to this folder (foldername) and
run the npm run dev command
to open your project.
12.index.html file open with browsers
and see the output in console.
No comments