Ia adalah sempena yang terakhir Pertemuan JS-Star, dianjurkan oleh JS-Republic, bahawa kami dapat menyemak pembungkus JavaScript terkemuka pada masa ini dan fungsinya. Sudah tiba masanya untuk mengambil stok alat kecil ini yang menjadikan hidup lebih mudah!

Tema malam ini ialah pengurusan pergantungan JavaScript pada 2016, satu konsep yang dikaitkan secara intrinsik dengan pembungkus JavaScript. Soalan pertama yang datang kemudian, apakah pembungkus dan apa yang dibawanya berbanding dengan Gulp atau Grunt?
Dengan Gulp atau Grunt anda selalunya perlu menentukan susunan yang anda mahu memproses aset input anda. Sebagai contoh, anda mesti menentukannya sekali untuk menggabungkan fail js, masa lain untuk menjalankan ujian anda dan seterusnya…
Walaupun akhirnya kami hanya ingin dapat mengatakan bahawa fail A bergantung pada fail B (seperti Node.js) dan dengan memberikan hanya fail "root" alat kami cukup pintar untuk menggabungkan, memuat turun kebergantungan atau hanya jalankan ujian-ujian itu.
Dan itulah misi yang dipenuhi oleh alatan seperti Webpack, JSPM atau Rollup.js yang kami berhak untuk (semula) temui dalam tiga pembentangan teratas!

Pelbagai bentuk pembungkusan & Webpack

Teksi Anthony (@ModuloM) memperkenalkan subjek dengan menerangkan secara terperinci pelbagai bentuk pembungkusan JavaScript (lihat video di bawah). Dia memberitahu kami tentang sejarah Globals dan IIFE (Ekspresi fungsi yang digunakan serta-merta), kemudian CommonJs, format Node.js, AMD yang pada mulanya dilancarkan oleh Require.js, UMD percubaan untuk mendamaikan dua yang sebelumnya, dan akhirnya masa hadapan dengan modul ES2015.
Dalam video yang sama ini anda akan menemui Anthony Giniers (@aginiers) memberi kami penjelasan yang lebih daripada dialu-alukan untuk kebanyakan kita tentang konfigurasi samar Webpack !

JSPM

JSPM tidak ketinggalan pada petang ini terima kasih kepada Jordane Garnet (@JoGarnet). Dengan bijak mencampurkan pembentangan tangan dan akademik, dia dapat membentangkan kepada kami alat ini yang akan mendapat manfaat daripada dikenali. Untuk menonton !

RollupJS

Akhirnya malam itu berakhir dengan pembentangan RollupJS oleh Mathieu Breton (@MatBreton). Alat yang kurang dikenali ini bertujuan untuk menjadi projek percubaan untuk mempromosikan penggunaan modul ES6. Format ini, yang akan menjadi format pakej JavaScript pada masa hadapan, masih tidak digunakan secara meluas, contohnya ialah fail "utama" yang ditunjukkan oleh perpustakaan Node.js yang sentiasa dalam format UMD.

Kesimpulan

Sebagai tambahan kepada pelbagai format pembungkusan JS, dua perkataan juga muncul secara berterusan pada petang ini: pokok bergoyang
Di sebalik istilah ini menyembunyikan proses mengalih keluar kod mati (kod tidak digunakan) dalam kebergantungan JavaScript. Hasilnya ialah pengurangan yang berpotensi sangat ketara dalam penghantaran keluaran.
Sebagai contoh JavaScript menggunakan D3.js dan yang pada asalnya melakukan lebih daripada 58ko diperkecil dan gzip boleh naik taraf kepada 8ko dengan proses ini. (Source)
Anda akan menemui dua keping kod yang akan membolehkan anda memahami konsep dengan lebih baik. Dan kami memberitahu anda pada bulan Mac untuk pertemuan JS-Star seterusnya 😉

//-------------
// main.js
import {cube} from './maths.js';
console.log( cube( 5 ) ); // 125
//-------------
// maths.js
export function square ( x ) {
   return x * x;
}
// This function gets included
export function cube ( x ) {
   return x * x * x;
}

function cube ( x ) {
   return x * x * x;
}
console.log( cube( 5 ) ); // 125