Mengenal Es6, Babel JS dan Webpack

An introduction to ES6, Babel, and Webpack.

4 min readFeb 28, 2020

ES6 (ECMA Script 2015)

ES6 adalah sebuah singkatan dari ECMAScript versi 6. Sedangkan ECMAScript merupakan standarisasi scripting language (Javascript) yang dibuat oleh European Computer Manufacturers Association (ECMA).

Dengan ES6 kita dapat menggunakan syntax-syntax baru yang dapat memperingkas kodingan kita seperti arrow functions, template strings, class destruction, Modules, dll. Namun (untuk saat ini) fitur ES6 ini masih belum 100% dapat digunakan pada semua jenis browser, sehingga dibutuhkan bantuan Babel JS agar syntax ES6 tetap dapat dijalankan. Babel dapat diartikan sebagai sebuah transpiler, yang tugasnya menterjemahkan sintaks-sintaks yang unsupported ke sintaks yang di-support oleh browser atau NodeJS. Untuk penjelasan detail babel akan dibahas pada bagian selanjutnya.

Syntax pada ES6 :

Variable

const dan let merupakan keyword pada ES6 untuk mendeklarasikan variable. Keduanya merupakan blocked-scope variable yang berarti hanya dapat digunakan pada scope dimana variable tersebut dideklarasikan.

const memiliki sifat immutable(except when it used with objects) dengan kata lain kita tidak dapat melakukan reassigned pada variable const.

let memiliki sifat mutable sehingga kita dapat me reassigned variable tersebut.

2. Arrow function = () => {}

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

3. Template Literal

Dengan menggunakan template literals, we can improve the code readability. Sebelum adanya ES6 kita menggunakan + operator whenever we wanted to concatenate string. Template literals menggunakan back-ticks(“) (sebelah angka 1) seperti contoh berikut.

4. Object dan Array Destructing

Destructing in javascript basically means the breaking down of a complex structure(Objects or arrays) into simpler parts. Dengan destructing assignment kita dapat memisahkan array objects menjadi suatu variable.

BABEL

Bila kode ES6 dijalankan pada browser yang belum mendukung pasti akan terjadi error, sehingga dibutuhkan bantuan Babel JS agar syntax ES6 tetap dapat dijalankan. Babel dapat diartikan sebagai sebuah transpiler, yang tugasnya menterjemahkan sintaks-sintaks yang unsupported ke sintaks yang di-support oleh browser atau NodeJS. https://babeljs.io/

WEBPACK

Webpack (https://webpack.js.org/) merupakan module bundler yang digunakan untuk aplikasi javascript modern. Webpack akan membantu untuk mengelola setiap modul yang dibutuhkan aplikasi ke dalam bentuk dependency graph dan men-generate-nya menjadi satu atau lebih bundles yang berukuran lebih kecil, yang nantinya akan di-load oleh browser.

Webpack begins its work from entries. Often these are JavaScript modules where webpack begins its traversal process. During this process, webpack evaluates entry matches against loader configurations that tell webpack how to transform each match.

You Don’t Know JS Yet

So JS is a parsed language, but is it compiled?

flow of a JS source program:

After a program leaves a developer’s editor, it gets transpiled by Babel, then packed by Webpack (and perhaps half a dozen other build processes), then it gets delivered in that very different form to a JS engine.
The JS engine parses the code to an AST.
Then the engine converts that AST to a kind-of byte code, a binary intermediate representation (IR), which is then refined/converted even further by the optimizing JIT compiler.
Finally, the JS VM executes the program.

To visualize thoses steps, again: