JavaScript OOP Course 8: ES6 Tooling
References
- Code with Mosh: The Ultimate JavaScript Mastery Series – Part 2
- W3School: JavaScript Tutorial
ES6 Tooling
When we are using modern JavaScript wee need two kinds of tools:
- Transpiler = Translator + Compiler – it takes the modern JavaScript code (ES6+) and convert it to a JavaScript code that all browsers can understand (ES5). Babel is an example for such tool.
- Bundler - is a tool that combines all
.jsfiles into one.jsfile which we called a bundle, it also minify the code by eliminating the whitespace the comments and so on, and finally uglify the code which means it creates short names for the variables, functions classes, identifiers, etc. Webpack is the most popular bundler.
If we are using JavaScript in Node.js we don't have to worry about these tools, because the code is not sent via the network and we do need to compress it for fast delivery or make it compatible with old browsers which doesn't support ES6 code.
Babel and Webpack are available via the Node.js package manager – npm. The installation and the basic usage of these tools are covered by the last two lectures from the Mosh's course The Ultimate JavaScript Mastery Series – Part 2.
Install Node.js and NPM
Babel and Webpack are available at Node.js package manager – npm. The following examples is created and started within Ubuntu on WSL on Windows 10.
sudo apt install nodejs && node -v
v10.19.0
sudo apt install npm && npm -v
6.14.4
Babel the most popular Transpiler
Once Node.js and NPM are available create a home directory for the project and go inside.
mkdir -p ~/tmp/es6-tooling
mkdir -p ~/tmp/es6-tooling/build
cd ~/tmp/es6-tooling
Then install the necessary Babel's packages.
# npm i babel-cli@6.26.0 babel-core@6.26.0 babel-preset-env@1.6.1 --save-dev
npm i babel-cli babel-core babel-preset-env --save-dev
Create package.json.
npm init
Then modify package.json in the following way.
{
"name": "es6-tooling",
"version": "1.0.0",
"description": "Just test how Babel works",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0"
},
"scripts": {
"babel": "babel --presets env index.js -o build/index.js"
},
"author": "Spas Z. Spasov",
"license": "ISC"
}
Then create index.js with really simple ES6 content.
index.js
const x = 1;
Then run the babel command that we've defined in the package.json "script" section.
npm run babel
The output is the file build/index.js which is ES5 compatible version of index.js and looks like as follow.
build/index.js
"use strict";
var x = 1;
Webpack the most popular Bundler
Once Node.js and NPM are available create a home directory for the project and go inside.
mkdir -p ~/tmp/es6-tooling
mkdir -p ~/tmp/es6-tooling/build
mkdir -p ~/tmp/es6-tooling/src
cd ~/tmp/es6-tooling
Also create the two modules (from the previous section) index.js and circle.js and the main file index.html.
src/circle.js
const _radius = new WeakMap();
export default class Circle {
constructor(radius) { _radius.set(this, radius); }
draw() { console.log('Circle with radius ' + _radius.get(this)); }
}
src/index.js
import Circle from './circle.js';
const c = new Circle(10);
c.draw();
index.html # note type="module" within the <script> tag
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head -->
</head>
<body>
<!-- body -->
<script type="module" src="src/index.js"></script>
</body>
</html>
Use npm and install Webpack CLI globally (the option -g) so we can access it in each project.
# npm i -g webpack-cli@2.0.14
sudo npm i -g webpack-cli peer
Now go into the project directory and run the following command to initialize the project – it will automatically install babel-cli and the other necessary packages.
webpack-cli init
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) y
webpack-cli init
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? No
? Do you want to simplify the creation of HTML files for your bundle? No
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? none
? Do you like to install prettier to format generated configuration? Yes
[webpack-cli] ℹ INFO Initialising project...
create package.json
conflict src/index.js
? Overwrite src/index.js? do not overwrite
skip src/index.js
create README.md
conflict index.html
? Overwrite index.html? do not overwrite
skip index.html
create webpack.config.js
create .babelrc
npm WARN my-webpack-project@1.0.0 No repository field.
npm WARN my-webpack-project@1.0.0 No license field.
+ prettier@2.5.1
+ webpack-cli@4.9.2
+ babel-loader@8.2.3
+ @babel/core@7.17.5
+ @babel/preset-env@7.16.11
+ webpack@5.69.1
added 218 packages from 111 contributors, removed 328 packages, updated 2 packages, moved 5 packages and audited 292 packages in 14.653s
17 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
[webpack-cli] Project has been initialised with webpack!
The resulting structure of the above steps is shown at Video 1.
webpack-cli init command.Let's see how Webpack works – go into the project home directory and run the following command.
npm run build
After the command is finished a new directory called dist/ is created and inside is available a the new bundle file called main.js.
dist/main.js
(()=>{"use strict";function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var t=new WeakMap;new(function(){function n(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),t.set(this,e)}var r,a;return r=n,(a=[{key:"draw",value:function(){console.log("Circle with radius "+t.get(this))}}])&&e(r.prototype,a),Object.defineProperty(r,"prototype",{writable:!1}),n}())(10).draw()})();
Edit the relevant line of the file index.html in the following way, save it and see the result in the browser's console.
<script src="dist/main.js"></script>
# Result in the browser's console
Circle with radius 10 main.js:1
In order to force Webpack to apply our further changes automatically we can run it in watch mode by the command –watch. First modify the watch command within the script section of the package.json file in the following way.
{
"...": "...",
"scripts": {
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --mode=production --node-env=production --watch"
},
"....": "...."
}
Then run the command within the project's home directory.
npm run watch
> my-webpack-project@1.0.0 watch /home/spas/tmp/es6-tooling
> webpack --watch
asset main.js 5.21 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.17 KiB
./src/index.js 67 bytes [built] [code generated]
./src/circle.js 1.1 KiB [built] [code generated]
webpack 5.69.1 compiled successfully in 770 ms
After that change some of the source files, located in the directory src/, save the changed and inspect the browser's console once again.
