Cara menggunakan fitur JavaScript terbaru di browser apa pun

JavaScript adalah bahasa yang berkembang sangat cepat dan terkadang kami ingin menggunakan fitur terbarunya, tetapi jika browser atau lingkungan kami tidak mengizinkannya secara langsung, kami harus menranspilasinya agar dapat melakukannya.



Transpiling adalah transformasi kode sumber yang ditulis dalam satu bahasa ke bahasa lain dengan tingkat abstraksi yang sebanding. Karenanya, dalam kasus JavaScript, transpiler menggunakan sintaks yang tidak dipahami oleh browser lama dan mengubahnya menjadi sintaks yang mereka pahami.

Polyfilling vs. Transpiling

Kedua metode bekerja untuk tujuan yang sama: kita dapat menulis kode yang menggunakan fitur baru yang tidak diterapkan di lingkungan target kita, lalu menerapkan salah satu metode ini.



Polyfill adalah bagian kode yang mengimplementasikan fitur modern sehingga dapat diterapkan untuk bekerja di versi browser yang lebih lama.



Transpiling adalah kombinasi dari dua kata: transformasi dan

kompilasi. Terkadang sintaks baru tidak dapat diimplementasikan dengan polyfills, dalam hal ini kami menggunakan transpiler.



Bayangkan kita menggunakan browser lama yang tidak mendukung fungsi Number.isNaNdiperkenalkan dalam spesifikasi ES6. Untuk menggunakan fitur ini, kita perlu membuat polyfill untuk metode ini, tetapi kita hanya membutuhkan ini jika belum tersedia di browser.



Untuk melakukan ini, kita akan membuat fungsi yang meniru perilaku fungsi isNaN dan menambahkannya ke properti Number pada prototipe.

//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));

Kami sekarang akan mentranspilasi kode untuk fungsi yang baru dibuat. Mari kita bayangkan bahwa sebagian besar browser tidak dapat memenuhi fungsi ini, dalam hal ini kita tidak dapat membuat polyfill untuk mensimulasikan perilaku tersebut. Kami ingin menjalankan kode berikut di Internet Explorer 11, jadi kami akan mengubahnya menggunakan transpiler:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

Kode yang dihasilkan telah di-porting menggunakan transpiler online Babel , dan sekarang kita dapat menjalankannya di Internet Explorer 11:

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick

Salah satu transpiler JavaScript yang paling umum adalah Babel. Babel adalah alat yang dibuat untuk membantu mem-port kode Anda di antara berbagai versi JavaScript dan dapat diinstal melalui Node Package Manager (npm).



Babel telah menjadi standar untuk menyusun aplikasi ECMAScript menjadi versi ECMAScript yang bekerja di browser yang tidak mendukung aplikasi tersebut. Babel dapat mengkompilasi versi ECMAScript lain seperti React JSX.



Pada langkah selanjutnya, kita akan melihat bagaimana menggunakan Babel untuk mentranspilasi dan menjalankan kelas mySuperMethod sebelumnya pada mesin Linux dengan Node.js yang lama diinstal . Pada sistem operasi lain, seperti Windows 10 atau macOS, langkah-langkahnya serupa.



Catatan. Node.js harus diinstal di komputer Anda . Npm telah ditambahkan sebagai fungsi ke penginstal Node.js



1. Buka prompt perintah dan buat direktori bernama babelContoh:

/mkdir babelExample
/cd babelExample

2. Buat proyek npm dan biarkan default. Perintah berikut akan membuat file bernama package.json:

npm init

tangkapan layar isi file package.json setelah eksekusi perintah npm init



Di sini index.js (nama file mungkin berbeda) adalah titik masuk ke aplikasi kita. Di sinilah kita akan meletakkan kode javascript kita, jadi buat file index.js dan masukkan kode berikut di dalamnya:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

3. Meskipun kita dapat menginstal Babel CLI secara global, yang terbaik adalah melakukannya secara lokal, proyek demi proyek. Perintah berikut akan menambahkan direktori node_modules dan mengubah file package.json untuk menambahkan dependensi Babel:

npm install -save-dev @babel/core @babel/cli

tangkapan layar package.json dengan dependensi babel



4. Tambahkan file konfigurasi .babelrc ke root proyek dan sertakan plugin untuk transformasi ES2015 +.



Catatan. Di Babel, setiap trafo adalah plugin yang dapat kita instal secara individual. Setiap preset adalah kumpulan plugin terkait. Dengan menggunakan preset, kita tidak perlu menginstal dan memperbarui lusinan plugin sendiri.



Setel preset untuk semua fitur ES6 (berisi sekelompok plugin):

npm install @babel/preset-env --save-dev

tangkapan layar package.json dengan dependensi babel preset-env



Edit file .babelrc dan tambahkan konfigurasi yang menyertakan transformasi untuk ES6.



Tulis kode berikut ke file .babelrc Anda:

{
  "presets": ["@babel/preset-env"]
}

5.



Catatan Penggunaan . Jika Anda menggunakan Windows 10 PowerShell, berhati-hatilah saat menyandikan file Anda karena Anda bisa mendapatkan kesalahan penguraian saat memulai Babel. Sebaiknya file dalam pengkodean UTF-8.



input: index.js

output: out folder (Babel akan meninggalkan file yang dimigrasi di sini)



Langsung dengan menjalankan perintah berikut di konsol:

./node_modules/.bin/babel index.js -d out

Dengan skrip npm menambahkan baris berikut ke file package.json Anda:

"build": "babel index.js -d out"

tangkapan layar konten file package.json setelah menambahkan skrip build



Jalankan perintah berikut:

npm run build

Dalam kedua kasus, Anda masuk ke folder keluar sebuah file (atau file) yang ditranspilasi menjadi browser siap pakai yang tidak mendukung sintaks kelas ES6, kodenya adalah:

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());

Kesimpulan

Bahasa JavaScript terus berubah, dan berkat alat ini, kami dapat menulis kode dengan sintaks baru dan fitur baru yang belum diterapkan di semua versi browser.



Saya harap Anda menikmati artikel ini. Saya menyiarkan ini dan banyak artikel berguna lainnya untuk pengembang Frontend pemula di saluran Telegram Frontend.school () , di mana saya juga menyiapkan kuis yang berguna untuk menguji pengetahuan saya. Saya menarik perhatian Anda pada fakta bahwa saluran tersebut murni hobi dan keinginan untuk membantu serta tidak membawa manfaat materi bagi saya.