Polyfills - pengisi atau lubang ternganga? (Bahagian-1)

Beberapa hari lalu, kami menerima mesej keutamaan dalam sembang Pasukan organisasi kami, yang berbunyi: Kerentanan Keselamatan ditemui - JavaScript Polyfill dikesan - TINGGI.
Untuk memberikan konteks, saya bekerja untuk firma perbankan utama dan seperti yang anda mesti tahu, kelemahan perbankan dan keselamatan adalah seperti musuh utama. Jadi, kami mula mendalami perkara itu dan menyelesaikannya dalam beberapa jam, yang akan saya bincangkan dalam perkara berikut. Tetapi bahagian yang baik (atau paling teruk?) ialah apabila saya menggoogle tentang isu itu pada mulanya, hasil carian yang muncul membuatkan saya terpikat sepanjang hari!

Mari kita serlahkan percanggahan antara penyemak imbas moden dan lama. Berikut ialah perbandingan keluaran Chrome terkini berbanding Internet Explorer (IE) 9. Pelayar moden menyokong banyak ciri ES6 dan pada masa yang sama, IE9 dan juga IE11, yang masih digunakan oleh banyak syarikat hampir tidak menyokong sebarang ciri ES6 .
Di sini datang untuk membantu konsep memindahkan, yang dalam konteks JavaScript, merujuk kepada menukar kod sumber yang ditulis dalam JavaScript moden (ES6/ES2015 dan seterusnya) kepada versi yang lebih lama seperti ES5 , yang disokong secara meluas oleh pelayar lama. Transpiler yang sangat popular ialah Babel, yang menawarkan pelbagai ciri seperti transformasi sintaks, penggabungan kod (bersama Webpack) dan sokongan untuk JSX (untuk rakan manis kami, React!).

Kini, penggunaan transpiler sangat biasa di tempat yang terdapat banyak sintaks moden dan seseorang itu perlu memastikan keserasian merentas persekitaran yang berbeza. Sila ambil perhatian bahawa menukar keseluruhan pangkalan kod kepada versi yang berbeza memerlukan banyak masa dan juga menyediakan proses binaan dan konfigurasi tambahan untuk perkara seperti Babel. Tidak diceritakan bahawa, bersama-sama dengan menukar ciri sintaksis, fungsi API untuk melanjutkan replikasi ciri yang sama dalam penyemak imbas lama turut diliputi.

Merujuk kepada rujukan Babel, ia membentuk banyak pakej, menyediakan pemalam untuk pelbagai jenis fungsi seperti menukar kelas ES6, fungsi anak panah, dsb. menjadi kod JS yang setara. Antaranya, ia turut menawarkan pakej "polyfill" sendiri.

Polyfills ialah kepingan kod yang membolehkan penyemak imbas lama menyediakan kefungsian JS yang sama/hampir sama, yang mereka tidak sediakan secara asli, yang ditunjukkan dalam versi penyemak imbas yang lebih baharu. Berikut ialah contoh video pantas dan pelaksanaan yang sangat mudah.

Kini seseorang mungkin terfikir, maka apakah perbezaan antara transpiler dan polyfill? Nah, polyfill memfokuskan pada meniru API tertentu yang tiada dan bukannya menukar keseluruhan pangkalan kod kepada versi mesra pelayar lama yang dilakukan oleh transpiler. Ini membolehkan pendekatan yang lebih terperinci dan sudah tentu, menjadikannya lebih cekap dan berprestasi.

Ini sepatutnya memberi kita latar belakang yang mencukupi untuk sampai ke titik mengapa saya ketagih selama sehari sehingga saat saya menulis ini, tentang polyfill.

Kini, Babel mempunyai pakej yang dipanggil babel/polyfill yang terdiri daripada 2 perpustakaan: core-js dan regenerator-runtime. Pada mulanya, mengimport pakej ini akan membawa masuk semua polyfills ke dalam tindakan.

import '@babel/polyfill';

Tetapi membawa masuk segala-galanya sama ada projek anda akan menggunakannya atau tidak, meningkatkan saiz berkas dan menyuntik polyfill secara global mungkin membawa kepada konflik dalam objek.
Ini membawa kepada penamatan pakej dan Babel mengesyorkan menggunakan perpustakaan teras-js secara langsung oleh
Langkah 1: Mengubah suai konfigurasi babel

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

Langkah 2: Import poliisi secara manual yang akan anda gunakan dalam projek anda

import "core-js/es/array/includes";
import "core-js/es/promise";

oleh itu, menjimatkan memori dan mengurangkan kod yang tidak diperlukan.

Sekarang, ini adalah penghujung satu bahagian, tidak begitu membimbangkan semata-mata, tetapi pastinya penting dalam hal projek, mengikuti perkembangan terkini dengan perubahan dalam kebergantungan, memberikan pengalaman yang lebih baik kepada pelanggan mereka.

TAPI. Ini bukan semua.

Kami akan membincangkan serangan besar yang berlaku baru-baru ini dan menggegarkan seluruh internet dan membuatkan mereka menyelusuri pangkalan kod mereka.
Dan, ia termasuk perkara yang telah kita bincangkan di sini. Jadi nantikan bahagian kedua!

Atas ialah kandungan terperinci Polyfills - pengisi atau lubang ternganga? (Bahagian-1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!