Pengantar Parcel.js, Bundler Aplikasi Web Tanpa Konfigurasi

Pengantar Parcel.js, Bundler Aplikasi Web Tanpa Konfigurasi

Pengantar Parcel.js, Bundler Aplikasi Web Tanpa Konfigurasi
СОДЕРЖАНИЕ
02 июня 2020

Posting ini adalah pengantar Anda untuk Parcel.js, yang diproklamirkan sendiri "terik cepat, nol bundler aplikasi web konfigurasi." Berikut semua yang perlu Anda ketahui untuk memulai dengan itu:


Banyak pengembang front-end menjadi frustrasi dengan beberapa kompleksitas yang terlibat dengan membangun aplikasi web saat ini. Merupakan praktik standar yang cukup untuk menyertakan beberapa jenis alat bangun atau bundling dalam alur kerja front-end, sehingga banyak pengembang telah mempertimbangkan menggunakan alat ujung depan seperti webpack.

Paket web adalah bundler paling populer dan diikuti oleh Require.js, Rollup, dan solusi serupa. Tetapi kurva belajar untuk alat seperti webpack curam. Memulai dengan webpack tidak mudah karena konfigurasi yang rumit. Akibatnya, dalam beberapa tahun terakhir solusi lain telah muncul. Alat ini tidak harus merupakan pelari depan, tetapi merupakan alternatif yang lebih mudah dicerna pada lanskap bundler modul front-end. Memperkenalkan Parcel.js.

Pengantar Parcel.js

Parcel.js (parceljs.org) persis seperti yang diinginkan oleh banyak pengembang menengah hingga menengah: Bundler konfigurasi rendah sederhana yang dapat Anda bangun dan jalankan dengan cepat.

Saya harap tutorial Parcel ini akan memberikan pengantar yang mudah diikuti untuk alat ini. Saya akan membahas dasar-dasarnya dan kemudian saya akan menunjukkan kepada Anda bagaimana menggunakan Parcel untuk menggabungkan aplikasi web sederhana yang menggabungkan Babel dan Sass.

�� Daftar Isi:

  1. Mengapa menggunakan bundler aplikasi web? #
  2. Menginstal Parcel.js #
  3. Membuat titik entri file #
  4. Dist / folder #
  5. Menggunakan Parcel.js dengan Babel #
  6. Menggunakan Parcel.js dengan Sass #
  7. Menggabungkan banyak skrip dengan Parcel #
  8. Pemecahan kode dengan Parcel.js #
  9. Produksi dibuat dengan Parcel.js #
  10. Adakah kekurangan menggunakan Parcel? #

Situs web Parcel.js

Mengapa menggunakan bundler aplikasi web?

Saya tidak akan menghabiskan terlalu banyak waktu untuk membahas alasan menggunakan bundler aplikasi seperti Parcel.js, karena topik itu sudah dibahas sebelumnya. Tapi di sini adalah ikhtisar dasar dari manfaat menggunakan alat seperti itu:

  • Aplikasi Anda akan memiliki lebih sedikit permintaan HTTP karena skrip atau stylesheet digabungkan
  • Script dan stylesheet dapat dimuat sesuai permintaan, lebih lanjut meningkatkan kinerja
  • Skrip dan stylesheet dapat secara otomatis dikecilkan untuk memberikan kilobyte yang lebih sedikit kepada pengguna
  • Pekerjaan bundling dan minifikasi dilakukan secara otomatis oleh alat ini, meminimalkan kerja manual
  • File pengembangan diatur secara modular, membuat kode Anda lebih mudah untuk dipelihara dan di-debug

Seperti yang Anda lihat, manfaatnya banyak, dan sebagian besar terkait dengan kinerja dan pemeliharaan proyek. Tentu ada banyak alasan untuk menggunakan bundler, jika ini adalah sesuatu yang belum Anda pertimbangkan.

Dengan itu, mari kita mulai dengan dasar-dasar untuk bangun dan berjalan dengan Parcel.js. Saya perlahan akan membahas fitur-fitur dalam tutorial ini menggunakan beberapa contoh sederhana yang dapat Anda ikuti dengan mudah.

Menginstal Parcel.js

Anda dapat menginstal Parcel.js di terminal Anda menggunakan Benang atau npm. Untuk tutorial ini, saya akan menggunakan npm. Ini perintah untuk menginstalnya secara global sehingga Anda dapat menggunakannya pada proyek apa pun:

npm instal parcel-bundler -g

Bendera -g menginstalnya secara global. Jika Anda hanya ingin menginstalnya untuk satu proyek dan menambahkannya ke devDependencies proyek Anda di package.json, Anda dapat menjalankan perintah yang sama di dalam folder root proyek menggunakan flag –save-dev bukan -g:

npm instal parcel-bundler –save-dev

Dengan pemasangan global (yang akan menjadi kasus penggunaan paling umum), Anda dapat memulai proyek yang diberikan menggunakan perintah init. Gunakan terminal untuk menavigasi ke folder yang ingin Anda gunakan sebagai root dari aplikasi Anda dan jalankan:

npm init -y

Bendera -y mencegah npm dari mengajukan pertanyaan, menggunakan default untuk pengaturan. Dengan asumsi proyek saya disebut parcel-demo, ini membuat file package.json di root yang terlihat seperti ini:

{
"nama": "demo paket",
"Versi: kapan": "1.0.0",
"deskripsi": "",
"utama": "index.js",
"skrip": {
"uji": "gaung \"Kesalahan: tidak ada tes yang ditentukan \" && keluar 1"
},
"kata kunci": [],
"penulis": "",
"lisensi": "ADALAH C"
}

Jika Anda menemukan salah satu di atas membingungkan karena Anda tidak terbiasa dengan npm, Anda dapat memeriksa komprehensif saya tutorial tentang npm. Ini difokuskan untuk membantu pengembang web front-end memahami alat ini.

Membuat titik entri file

Untuk penyiapan proyek dasar, saya akan menggunakan Parcel.js pada file index.html yang mengarah ke file JavaScript utama yang disebut index.js (seperti yang ditunjukkan dalam file package.json). File HTML ini akan berfungsi sebagai titik masuk Parcel saya. File HTML saya akan memiliki elemen skrip yang mengarah ke file JavaScript saya, sehingga akan terlihat seperti ini:

html>
<html>
<kepala>
<judul>Demotitle Parcel>
kepala>
<tubuh>
<script src ="./js/index.js">naskah>
tubuh>
html>

Setelah saya memiliki file HTML dan file JavaScript yang benar, saya dapat memulai server pengembangan bawaan Parcel dengan menjalankan yang berikut di terminal saya di dalam folder proyek saya:

parcel index.html

Ini memulai server dan memberi tahu file apa yang digunakan sebagai titik masuk. Akibatnya, saya mendapatkan pesan berikut di sesi terminal saya:

Server berjalan di http: // localhost: 1234
√ Dibangun pada 887 ms.

Sekarang saya dapat membuka http: // localhost: 1234 / di browser saya untuk melihat apa yang telah saya buat sejauh ini. Server langsung menggunakan live reload dan sesuatu yang disebut penggantian modul panas. Ini akan secara otomatis memperbarui modul pada halaman tanpa melakukan penyegaran halaman penuh. Dengan cara ini saya bisa melihat kemajuan pembangunan saya dengan peningkatan yang lebih cepat, saat saya bekerja.

Setelah Parcel.js saya aktifkan dengan servernya, setiap perubahan yang saya buat pada file akan secara otomatis membangun kembali aplikasi saya setiap kali file disimpan. Untuk melihat ini dalam tindakan, saya akan menambahkan baris log konsol sederhana di skrip saya. Ini akan memicu pesan berikut di terminal saya:

$ parcel index.html
Server berjalan di http: // localhost: 1234
√ Dibangun pada 1.08s.
√ Dibangun dalam 28ms.

Setiap baris “Dibangun …” mewakili satu build, dipicu oleh perubahan konten dan penyimpanan.

Jika saya ingin menggunakan server saya sendiri, bukan server pengembangan bawaan Parcel, saya dapat menggunakan perintah arloji:

watch parcel index.html

Saya mendapatkan hasil yang sama di sesi terminal saya, dengan Parcel.js membangun aplikasi saya kemudian menunggu perubahan:

$ parcel watch index.html
√ Dibangun pada 855 ms.

Dist / folder

Setelah saya memulai Parcel.js dalam mode tontonan atau melalui server bawaan, jika saya melihat ke dalam folder proyek saya, saya akan melihat folder dan struktur file seperti berikut:

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Perhatikan folder dist yang dibuat secara otomatis. Di sinilah file produksi saya; Saya tidak menyentuh salah satu file ini. Perhatikan bahwa build Parcel saya telah secara otomatis mengkonversi file index.js saya menjadi file dengan versi yang ramah-cache yang unik (dengan nama file yang direvisi atau “direvasi”). Itu juga menambahkan file peta sumber (Anda dapat membaca tentang peta sumber dalam posting ini).

Jika saya melihat file index.html di dalam folder dist, saya akan melihat yang berikut:

html>
<html>
<kepala>
<judul>Demotitle Parcel>
kepala>
<tubuh>

<script src ="/js.00a46daa.js">naskah>
tubuh>
html>

Perhatikan versi dist file index.html saya menunjuk dengan benar dan nyaman ke versi dist file .js saya.

Jika situs web saya menyertakan banyak file yang mengarah ke skrip yang sama (misalnya, about.html, contact.html, dll.), Saya dapat menggunakan perintah berikut:

parcel index.html about.html contact.html

Ini memberi tahu Parcel bahwa saya ingin menggunakan beberapa titik masuk untuk membangun. Saya juga dapat menggunakan perintah berikut untuk memberi tahu Parcel.js untuk menggunakan semua file HTML saya sebagai titik masuk:

paket * .html

Menggunakan Parcel.js dengan Babel

Parcel.js memiliki dukungan bawaan untuk berbagai transpiler kode, termasuk Babel, alat populer untuk mengonversi JavaScript generasi baru yang modern ke kode yang setara yang dapat dipahami oleh semua browser. Karena Babel terintegrasi ke Parcel.js, Anda tidak perlu plug-in khusus untuk menggunakannya, itu hanya berfungsi. Mari kita lihat sebuah contoh.

Saya akan menambahkan kode berikut ke file index.js saya:

function getInfo (nama, tahun = 2018, warna = ‘biru’) {
console.log (nama, tahun, warna);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Kode ini menggunakan fitur ES6 yang disebut parameter standar, yang dapat Anda lihat secara khusus di kepala fungsi. Browser lama tidak mendukung parameter default untuk fungsi. Untuk memastikan kode tidak menimbulkan kesalahan, saya perlu Babel untuk mengubah kode menjadi kode yang setara yang berfungsi di semua browser. Setelah saya menyimpan file index.js saya, Parcel.js akan membangun kembali aplikasi saya dan menghasilkan kode ES6 berikut yang saya tulis:

function getInfo (name) {
var year = arguments.length > 1 && argumen [1]! == tidak terdefinisi? argumen [1]: 2018;
var color = arguments.length > 2 && argumen [2]! == tidak terdefinisi? argumen [2]: ‘biru’;
console.log (nama, tahun, warna);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Anda dapat menggunakan balasan online Babel untuk uji ini.

Dan perhatikan faktor terpenting di sini: Saya tidak melakukan apa pun untuk menginstal atau mengkonfigurasi Babel – ini hanya berfungsi di luar kotak sebagai bagian dari pengaturan default Parcel! Tentu saja, Anda mungkin ingin menambahkan beberapa opsi konfigurasi untuk mengubah Babel untuk melakukan apa yang Anda inginkan. Jika itu masalahnya, Anda dapat menambahkan file .babelrc di folder root proyek Anda, dengan preferensi konfigurasi Anda disertakan. Anda dapat membaca lebih lanjut tentang menggunakan file .babelrc di situs web Parcel.js.

Menggunakan Parcel.js dengan Sass

Mirip dengan Babel, Parcel juga secara default akan mengkompilasi file SCSS (Sass) saya ke CSS yang valid. Untuk mendemonstrasikan ini, saya akan menambahkan folder yang disebut “css” ke root dari proyek contoh saya. Di folder itu saya akan menambahkan file style.scss dengan kode Sass berikut:

tubuh {
warna hitam;

.modul {
warna merah;
}
}

Saya menggunakan fitur bersarang pemilih pemilih. Saya akan menambahkan baris berikut ke bagian file HTML saya:

<tautan rel ="stylesheet" href ="./css/style.scss">

Setelah semua file saya disimpan, Parcel akan menghasilkan build baru di dist / folder saya dengan file CSS kompilasi yang telah mengonversi SCSS saya ke yang berikut:

tubuh {
warna hitam;
}
body .module {
warna merah;
}

Selama saya menginstal Sass pada sistem saya secara global, Parcel akan melakukan ini secara otomatis, tanpa konfigurasi yang diperlukan. Jika saya tidak menginstal Sass secara global, tidak masalah. Saya hanya bisa menulis SCSS saya, kemudian mulai Parcel dan Parcel akan menginstal Sass secara otomatis sebagai ketergantungan khusus proyek. Sangat mudah! Dan sekali lagi ini sangat berguna karena tidak memerlukan konfigurasi apa pun.

Dan seperti halnya Babel, saya dapat memilih untuk pergi dengan opsi konfigurasi default apa pun yang disertakan dengan Sass. Atau saya dapat membuat file .sassrc di root proyek saya dan menambahkan konfigurasi saya sendiri.

Menggabungkan banyak skrip dengan Parcel

Sejauh ini, contoh-contoh yang saya tunjukkan kepada Anda hanya untuk membuat Anda menjalankan dan menjalankan Parcel, sehingga Anda bisa mendapatkan ide dasar tentang bagaimana fungsinya. Seperti disebutkan sebelumnya, kekuatan dari setiap bundler adalah kemampuan untuk secara otomatis menggabungkan beberapa file menjadi satu file. Ini membantu mengurangi permintaan HTTP dan meningkatkan kecepatan situs web atau aplikasi Anda.

Semua yang saya tunjukkan sejauh ini dapat dilakukan dengan menggunakan beberapa skrip yang ditarik menggunakan fitur modul ES6. Ini memungkinkan saya untuk membuat dan mengimpor skrip secara modular. Ini membuat kode saya mudah dipelihara sementara masih hanya melayani satu skrip bundel dalam produksi.

Untuk mendemonstrasikan ini, saya akan menambahkan file terpisah bernama module.js yang akan berisi JavaScript berikut:

ekspor biarkan warna = ‘hijau’;

fungsi ekspor tambahkan (n1, n2) {
return n1 + n2;
}

Ini hanya beberapa kode dasar untuk mengekspor dua objek: variabel dan fungsi. Dalam file index.js saya, saya akan mengimpor sumber daya ini dengan kode berikut:

impor {color, add} dari ‘../js/module.js’;

console.log (warna); // "hijau"
console.log (tambahkan (20, 40)); // 60

Sekali lagi, ini hanya sintaks modul ES6 dasar. Saya tidak akan masuk ke detail tentang bagaimana ini bekerja di sini. Bagian yang indah tentang ini adalah kenyataan bahwa saya tidak perlu menentukan dalam file HTML saya bahwa saya menggunakan modul. Biasanya tag skrip saya akan terlihat seperti ini, dengan atribut type diset ke module:

<script src ="./js/index.js" type ="modul">naskah>

Tapi ini tidak diperlukan. Parcel mengenali modul yang sedang diimpor dan menggabungkan dua skrip saya menjadi satu sumber daya yang ramah kinerja. Ini terjadi tanpa konfigurasi atau plugin khusus. Dan seperti contoh sebelumnya, kode ditranslasikan menggunakan Babel menjadi kode setara ES5 yang akan memberi saya dukungan browser terbanyak.

Pemecahan kode dengan Parcel.js

Fitur lain dalam Parcel yang berfungsi tanpa konfigurasi adalah pemecahan kode. Dalam beberapa kasus, saya ingin semua modul saya dimuat di semua halaman saya. Tetapi dalam kasus lain, saya mungkin hanya ingin memuat modul tertentu pada halaman tertentu, dalam konteks tertentu. Inilah yang memungkinkan saya melakukan pemecahan kode.

Sebelumnya saya menyebutkan bahwa proyek contoh saya mencakup tiga halaman: index.html, about.html, dan contact.html. Katakanlah saya ingin menjalankan bundel JavaScript yang sama di ketiga halaman, tetapi pada halaman about.html saya memiliki tombol yang memicu sesuatu yang spesifik. Tapi saya hanya ingin kode itu dimuat ketika tombol itu ditekan.

Begini cara kode itu terlihat menggunakan fitur pemecahan kode:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (‘../ js / about.js’) lalu (
document.body.innerHTML + = ‘Tentang Halaman Diperbarui’;
);
});
}

Perhatikan ini menggabungkan fitur JavaScript baru, impor dinamis menggunakan fungsi impor (). Ini memungkinkan saya untuk memuat kode yang saya inginkan secara dinamis dalam contoh tertentu. Dalam hal ini, saya melakukannya ketika tombol ditekan pada halaman tentang. Fitur import () mengembalikan janji, jadi saya bisa melakukan apa pun yang saya inginkan di dalam klausa .then (), yang terpicu setelah skrip yang diimpor dimuat. Skrip about.js dimuat saat diminta dan kode ini akan ditranskrip oleh Babel ke cross-browser ES5, untuk memastikan ia bekerja di mana saja. Ketika bundel saya dibuat, bagian about.js dimasukkan ke dalam file sendiri di dalam dist / folder, untuk memungkinkan file ini dimuat sesuai permintaan.

Seperti fitur lain yang telah saya bahas, fitur impor () berfungsi di Parcel tanpa konfigurasi apa pun.

Produksi dibangun dengan Parcel.js

Sampai sekarang saya telah memproduksi semua paket Parcel saya dengan cepat menggunakan server bawaan yang dilengkapi dengan Parcel dan itu termasuk live reload. Setiap kali saya menyimpan proyek saya, bundel saya dibuat. Tetapi kode itu selalu dibundel untuk pengembangan berkelanjutan. Dengan cara ini saya dapat melihat atau memeriksa sumber yang diperlukan untuk melakukan debugging.

Setelah proyek saya selesai dan siap untuk didorong ke server langsung, saya dapat menghentikan Parcel dari menonton proyek saya. CTRL-C di terminal melakukan ini pada banyak platform. Lalu saya akan menjalankan perintah berikut untuk memberi tahu Parcel untuk membuat satu build terakhir:

parcel build index.html about.html contact.html

Dalam hal ini, saya membangun dari ketiga file entri saya. Setelah ini selesai, Parcel tidak lagi menunggu perubahan; bundel terakhir dibuat dan hanya itu. Selain pembangunan yang sedang diselesaikan, kode saya disiapkan untuk produksi oleh Parcel. HTML, CSS, dan JavaScript semuanya diperkecil untuk menghasilkan file sekecil mungkin untuk kinerja yang dioptimalkan.

Kerugian menggunakan Parcel?

Parcel pasti harus menjadi pilihan utama bagi mereka yang memiliki sedikit atau tidak memiliki pengalaman dengan alat membangun. Tetapi dalam penelitian saya sendiri, saya telah menemukan beberapa hal yang dapat saya sebutkan yang harus diperbaiki di masa depan.

Pertama-tama, Anda akan melihat bahwa Parcel selalu menempatkan skrip dan stylesheet yang dibundel Anda di direktori yang sama dengan file HTML titik masuk. Ini terjadi bahkan jika Anda memiliki file CSS dan JavaScript di folder terpisah. Karena ini adalah file produksi, itu mungkin tidak terlalu menjadi masalah. Tapi itu sesuatu yang perlu diingat. Berita baiknya adalah ini tampaknya telah diperbaiki dalam Parcel versi 2 yang akan datang (masih dalam Alpha). Jadi harus ada cara untuk mengesampingkan perilaku ini ketika versi Parcel stabil (versi stabil saat ini adalah 1.12.4).

Kelemahan lain adalah bahwa saya menemukan dokumentasi Parcel sangat minim ketika datang ke informasi tentang menyesuaikan opsi konfigurasi untuk fitur yang berbeda. Memang benar bahwa salah satu manfaat besar Parcel adalah seberapa baik kerjanya di luar kotak. Tapi saya pikir beberapa dokumentasi yang lebih luas tentang penyesuaian itu akan berguna. Misalnya, bagaimana cara menonaktifkan minifikasi HTML pada build saya, sambil mempertahankan CSS dan JavaScript minification? Saya tidak melihat deskripsi itu di dokumen. Ketika saya melihat melalui masalah tertutup pada GitHub, ada solusi (pikir itu sangat tidak nyaman).

Kesimpulan

Satu hal terakhir yang akan saya sebutkan adalah alat yang disebut Buat Aplikasi, yang dapat Anda gunakan untuk secara otomatis menghasilkan file konfigurasi untuk Parcel. Ini memungkinkan Anda memilih perpustakaan JavaScript, transpiler, linter, dan sebagainya, dan ini semua akan ditambahkan ke file package.json Anda, siap diinisialisasi.

Buat Aplikasi di Parcel.js

Itu saja untuk tutorial Parcel ini untuk pemula. Saya harap Anda dapat menggunakan informasi ini untuk bangun dan berjalan cepat dengan Parcel dan menggunakannya pada proyek-proyek masa depan. Dan jika Anda baru mengenal bundling aplikasi, atau belum pernah mencobanya pada proyek apa pun, mungkin pengantar ini akan menginspirasi Anda untuk mencoba Parcel.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Tata ruang dan presentasi oleh Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector