JavaScript OOP Course 8: ES6 Tooling: Difference between revisions
From WikiMLT
m Стадий: 6 [Фаза:Утвърждаване, Статус:Утвърден]; Категория:JavaScript |
m Text replacement - "mlw-continue" to "code-continue" |
||
| Line 18: | Line 18: | ||
== Install Node.js and NPM == | == Install Node.js and NPM == | ||
[https://babeljs.io/ '''Babel'''] '''and [https://webpack.js.org/ Webpack] are available at [https://nodejs.org/en/ Node.js] package manager - <code>npm</code>.''' The following examples is created and started within Ubuntu on WSL on Windows 10. | [https://babeljs.io/ '''Babel'''] '''and [https://webpack.js.org/ Webpack] are available at [https://nodejs.org/en/ Node.js] package manager - <code>npm</code>.''' The following examples is created and started within Ubuntu on WSL on Windows 10. | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
sudo apt install nodejs && node -v | sudo apt install nodejs && node -v | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="shell-session" class=" | <syntaxhighlight lang="shell-session" class="code-continue"> | ||
v10.19.0 | v10.19.0 | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
sudo apt install npm && npm -v | sudo apt install npm && npm -v | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 33: | Line 33: | ||
== Babel the most popular Transpiler == | == Babel the most popular Transpiler == | ||
Once Node.js and NPM are available create a home directory for the project and go inside. <syntaxhighlight lang="shell" class=" | Once Node.js and NPM are available create a home directory for the project and go inside. <syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
mkdir -p ~/tmp/es6-tooling | mkdir -p ~/tmp/es6-tooling | ||
mkdir -p ~/tmp/es6-tooling/build | mkdir -p ~/tmp/es6-tooling/build | ||
cd ~/tmp/es6-tooling | cd ~/tmp/es6-tooling | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Then install the necessary Babel's packages.<syntaxhighlight lang="shell" class=" | Then install the necessary Babel's packages.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
# npm i babel-cli@6.26.0 babel-core@6.26.0 babel-preset-env@1.6.1 --save-dev | # 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 | npm i babel-cli babel-core babel-preset-env --save-dev | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Create <code>package.json</code>. | Create <code>package.json</code>. | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
npm init | npm init | ||
</syntaxhighlight>Then modify <code>package.json</code> in the following way. | </syntaxhighlight>Then modify <code>package.json</code> in the following way. | ||
| Line 66: | Line 66: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Then create <code>index.js</code> with really simple ES6 content. | Then create <code>index.js</code> with really simple ES6 content. | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue"> | ||
index.js | index.js | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
const x = 1; | const x = 1; | ||
</syntaxhighlight>Then run the <code>babel</code> command that we've defined in the <code>package.json</code> <code class="noTypo">"script"</code> section.<syntaxhighlight lang="shell" class=" | </syntaxhighlight>Then run the <code>babel</code> command that we've defined in the <code>package.json</code> <code class="noTypo">"script"</code> section.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
npm run babel | npm run babel | ||
</syntaxhighlight>The output is the file <code>build/index.js</code> which is ES5 compatible version of <code>index.js</code> and looks like as follow.<syntaxhighlight lang="shell" class=" | </syntaxhighlight>The output is the file <code>build/index.js</code> which is ES5 compatible version of <code>index.js</code> and looks like as follow.<syntaxhighlight lang="shell" class="code-continue"> | ||
build/index.js | build/index.js | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 83: | Line 83: | ||
== Webpack the most popular Bundler == | == Webpack the most popular Bundler == | ||
Once Node.js and NPM are available create a home directory for the project and go inside.<syntaxhighlight lang="shell" class=" | Once Node.js and NPM are available create a home directory for the project and go inside.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
mkdir -p ~/tmp/es6-tooling | mkdir -p ~/tmp/es6-tooling | ||
mkdir -p ~/tmp/es6-tooling/build | mkdir -p ~/tmp/es6-tooling/build | ||
| Line 91: | Line 91: | ||
Also create the two modules (from the previous section) <code>index.js</code> and <code>circle.js</code> and the main file <code>index.html</code>. | Also create the two modules (from the previous section) <code>index.js</code> and <code>circle.js</code> and the main file <code>index.html</code>. | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue"> | ||
src/circle.js | src/circle.js | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 101: | Line 101: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue"> | ||
src/index.js | src/index.js | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 109: | Line 109: | ||
c.draw(); | c.draw(); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue"> | ||
index.html # note type="module" within the <script> tag | index.html # note type="module" within the <script> tag | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 123: | Line 123: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>'''Use <code>npm</code> and install Webpack CLI globally (the option <code>-g</code>) so we can access it in each project.'''<syntaxhighlight lang="shell" class=" | </syntaxhighlight>'''Use <code>npm</code> and install Webpack CLI globally (the option <code>-g</code>) so we can access it in each project.'''<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
# npm i -g webpack-cli@2.0.14 | # npm i -g webpack-cli@2.0.14 | ||
sudo npm i -g webpack-cli peer | sudo npm i -g webpack-cli peer | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Now go into the project directory and run the following command to initialize the project - it will automatically install <code>babel-cli</code> and the other necessary packages.<syntaxhighlight lang="shell" class=" | Now go into the project directory and run the following command to initialize the project - it will automatically install <code>babel-cli</code> and the other necessary packages.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
webpack-cli init | webpack-cli init | ||
</syntaxhighlight><syntaxhighlight lang="shell-session"> | </syntaxhighlight><syntaxhighlight lang="shell-session"> | ||
[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package. | [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] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n) y | ||
</syntaxhighlight><syntaxhighlight lang="shell" class=" | </syntaxhighlight><syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
webpack-cli init | webpack-cli init | ||
</syntaxhighlight><syntaxhighlight lang="shell-session"> | </syntaxhighlight><syntaxhighlight lang="shell-session"> | ||
| Line 182: | Line 182: | ||
| ca = The video shows the directory structure generated by the <code>webpack-cli init</code> command. | | ca = The video shows the directory structure generated by the <code>webpack-cli init</code> command. | ||
}} | }} | ||
Let's see how Webpack works - go into the project home directory and run the following command.<syntaxhighlight lang="shell" class=" | Let's see how Webpack works - go into the project home directory and run the following command.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
npm run build | npm run build | ||
</syntaxhighlight> | </syntaxhighlight> | ||
After the command is finished a new directory called <code>dist/</code> is created and inside is available a the new bundle file called <code>main.js</code>.<syntaxhighlight lang="shell" class=" | After the command is finished a new directory called <code>dist/</code> is created and inside is available a the new bundle file called <code>main.js</code>.<syntaxhighlight lang="shell" class="code-continue"> | ||
dist/main.js | dist/main.js | ||
</syntaxhighlight><syntaxhighlight lang="javascript"> | </syntaxhighlight><syntaxhighlight lang="javascript"> | ||
| Line 193: | Line 193: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="shell" class=" | <syntaxhighlight lang="shell" class="code-continue"> | ||
# Result in the browser's console | # Result in the browser's console | ||
</syntaxhighlight><syntaxhighlight lang="shell-session"> | </syntaxhighlight><syntaxhighlight lang="shell-session"> | ||
| Line 211: | Line 211: | ||
"....": "...." | "....": "...." | ||
} | } | ||
</syntaxhighlight>Then run the command within the project's home directory.<syntaxhighlight lang="shell" class=" | </syntaxhighlight>Then run the command within the project's home directory.<syntaxhighlight lang="shell" class="code-continue" line="1"> | ||
npm run watch | npm run watch | ||
</syntaxhighlight><syntaxhighlight lang="shell-session"> | </syntaxhighlight><syntaxhighlight lang="shell-session"> | ||
Latest revision as of 07:28, 26 September 2022
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.
Video 1. The video shows the directory structure generated by the
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.
