Parcel adalah pembangun proyek favorit saya

Hari ini kita akan berbicara tentang pembuat proyek (bundler), alat yang membuat hidup lebih mudah bagi pengembang. Inti dari pekerjaan bundler adalah mereka mengambil kode JavaScript yang terkandung dalam banyak file dan mengemasnya menjadi satu atau lebih file, memesan dan menyiapkannya untuk bekerja di browser dengan cara tertentu. Selain itu, berkat berbagai plug-in (plug-in) dan loader, kodenya dapat diperkecil, sumber daya lain (seperti file CSS dan gambar) dapat dipaket, selain kodenya. Bundlers memungkinkan Anda untuk menggunakan preprosesor, mereka dapat membagi kode menjadi fragmen yang memuat ketika mereka menjadi diperlukan. Tetapi kemampuan mereka tidak terbatas pada hal ini. Faktanya, kita berbicara tentang fakta bahwa mereka membantu mengatur proses pengembangan.



Ada banyak bundler. Misalnya - Browserify dan paket web . Meskipun pembangun proyek ini adalah alat yang hebat, saya pribadi menemukan mereka sulit untuk diatur. Di mana memulai pengaturan? Pertanyaan ini sangat relevan untuk pemula, bagi mereka yang mungkin sedikit takut dengan konsep "file konfigurasi".

Itu sebabnya saya biasanya menggunakan pembuat proyek Parcel . Saya menemukan bundler ini secara tidak sengaja ketika saya menonton satu video pelatihan di YouTube. Ada tips untuk mempercepat pengembangan. Lingkungan kerja yang ditunjukkan dalam video ini sangat terkait dengan Parcel. Setelah itu, saya memutuskan untuk mencoba bundler ini.

Fitur Parcel

Yang paling saya sukai dari Parcel adalah tidak membutuhkan konfigurasi sama sekali. Itu benar: Anda tidak perlu mengkonfigurasinya. Dalam hal ini, Parcel mengungguli webpack , di mana pengaturan dapat tersebar di beberapa file dan mewakili seluruh "lembar" kode. Pengembang, menyiapkan webpack, mungkin telah mengambil sesuatu dari file konfigurasi programmer lain. Ada kemungkinan bahwa pengaturan hanya disalin seluruhnya dari proyek lain. Jelas bahwa kompleksitas konfigurasi tergantung pada pengembang, tetapi bahkan ketika menyiapkan webpack untuk proyek kecil, Anda perlu menggunakan set plug-in tertentu dan menginstal opsi tertentu.

Itulah mengapa penggunaan Parcel menurut saya sebuah kudeta. Misalnya, jika seorang pengembang berencana untuk menyesuaikan dgn mode proyeknya menggunakan SCSS atau KURANG, maka ia dapat, tanpa gerakan yang tidak perlu, cukup menulis kode yang sesuai. Ingin menggunakan fitur JavaScript terbaru? Jika demikian, Anda dapat, tanpa memikirkan apa pun, menulis kode menggunakan fitur ini. Perlu server untuk pengembangan? Orang yang menggunakan Parcel memiliki server seperti itu. Faktanya, di sini kita hanya menyentuh ujung gunung es dari kemampuan Parcel yang luas.

Parcel memungkinkan programmer, tanpa membuang waktu untuk apa pun yang sekunder, cukup mengambil dan mulai bekerja pada proyek. Ini adalah keuntungan utama menggunakannya sebagai bundler. Parcel, di samping itu, memproses file dan membangun proyek dengan sangat cepat, menggunakan kemampuan prosesor multi-core, sementara bundler lain, termasuk paket web, melakukan transformasi kode yang lebih lambat dan lebih kompleks bekerja lebih lambat.

Lingkup penggunaan Parcel

Parcel, seperti alat lain, bukan alat universal, yang bisa diterapkan dengan baik di mana pun dan kapan pun. Tetapi ada situasi di mana Parcel sangat sukses.

Saya sudah bicara tentang seberapa cepat Parcel memungkinkan Anda memasuki proyek yang berfungsi. Berkat ini, sangat ideal untuk bekerja dalam kerangka waktu yang ketat dan untuk membuat prototipe. Kita berbicara tentang situasi di mana waktu mahal, dan ketika tujuan pengembang adalah membuat aplikasi yang berfungsi secepat mungkin.

Ini tidak berarti bahwa Parcel tidak cocok untuk aplikasi yang kompleks, atau untuk proyek-proyek di mana tim besar programmer berpartisipasi. Parcel berkinerja baik dalam kondisi seperti itu. Namun, saya menyadari bahwa proyek skala besar dapat memperoleh manfaat dari menyesuaikan alur kerja secara manual.

Untuk membandingkan bundler yang tidak memerlukan pengaturan dengan bundler yang perlu dikonfigurasi adalah bagaimana membandingkan mobil dengan transmisi otomatis dan manual. Terkadang pengemudi mungkin perlu mengendalikan lebih banyak detail, dan terkadang kurang.

Saya sedang mengerjakan satu situs multi-halaman, di dalamnya ada banyak kode JavaScript. Parcel berkinerja baik dalam proyek ini. Dia memberi saya server, dia mengkompilasi Sass dalam CSS, menambahkan awalan produsen browser ke kode, jika perlu, dan diizinkan, tanpa pengaturan apa pun, menggunakan perintah ekspor dan impor dalam file JavaScript. Semua ini sangat memudahkan pekerjaan saya di proyek.

Membuat situs web sederhana menggunakan Parcel

Mari kita mengatur test drive Parcel. Ini akan memungkinkan kita melihat bahwa membuat sesuatu dengan bundler ini relatif sederhana. Inilah halaman tempat kami akan bekerja.


Proyek Percontohan

Kami akan membuat situs sederhana yang akan menggunakan Sass dan sedikit JavaScript. Kami akan menampilkan informasi tentang hari ini dalam seminggu dan gambar acak yang diunduh dari Sumber Unsplash di halaman situs.

Structure Struktur dasar proyek

Proyek, yang direncanakan menggunakan Parcel, tidak memerlukan struktur khusus file dan folder. Tidak harus menggunakan kerangka kerja tertentu. Struktur dasar proyek akan terdiri dari tiga file yang namanya berbicara sendiri. Ini adalah index.html , style.scss dan index.js . Anda dapat membuatnya sesuka Anda. Misalnya, menggunakan baris perintah:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

Tambahkan sedikit kode templat dan markup ke file index.html yang menjadi dasar fungsionalitas proyek:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

Anda mungkin memperhatikan bahwa di sini saya mengunduh font web ( Lato ) dari Google Fonts. Menggunakan font yang dapat diunduh bersifat sukarela. Di sini perlu diperhatikan untuk menghubungkan file CSS dan JavaScript, dan ke kode HTML dari badan dokumen, yang menyediakan tempat untuk mengeluarkan informasi tentang hari dalam seminggu, dan tempat untuk menghasilkan gambar acak dari Unsplash. Sebenarnya, pada pekerjaan ini pada struktur dasar proyek selesai.

▍Jenis persiapan cepat Parcel untuk bekerja

Sekarang, sebelum beralih ke gaya dan skrip, mari kita coba menjalankan proyek kami menggunakan Parcel. Tidak ada yang aneh tentang menginstal Paket:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

Sekarang inisialisasi proyek menggunakan npm atau benang, yang akan mengarah pada pembuatan file package.json :

 npm init -y #  yarn init -y 

Itu saja! Tidak perlu pengaturan lebih lanjut. Yang harus kita lakukan hanyalah memberi tahu Parcel tentang file mana yang merupakan titik masuk proyek. Ini akan memungkinkan bundler untuk mencari tahu apa yang perlu diberikan servernya kepada klien.

Dalam kasus kami, file seperti itu adalah index.html :

 parcel index.html 

Setelah server mulai berhasil, berikut ini akan ditampilkan di konsol:

 Server running at http://localhost:1234 √ Built in 13ms. 

Server Parcel mendukung boot panas. Bundler membangun kembali aplikasi setiap kali perubahan yang dilakukan pada file proyek disimpan.

Mari kita kembali ke folder proyek. Di sini Anda dapat melihat folder dan file baru yang dibuat oleh bundler.


Folder dan file baru dibuat oleh bundler

Kami sangat tertarik pada folder dist . Ini berisi semua kode yang dikompilasi, termasuk peta kode untuk CSS dan JavaScript.

▍ Kelanjutan pekerjaan pada proyek

Mari kita style.scss file style.scss dan berkenalan dengan bagaimana Parcel memproses kode Sass. Di sini saya membuat beberapa variabel yang digunakan untuk menyimpan warna dan lebar wadah tempat konten halaman ditempatkan:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

Sekarang, di file yang sama, tambahkan deskripsi gaya. Di sini Anda dapat membuat apa yang Anda suka. Sebagai contoh, saya melakukan ini:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

Segera setelah file ini disimpan, Parcel akan mulai berfungsi, kompilasi semuanya, dan memuat ulang halaman di browser. Kami tidak perlu melakukan apa pun selain menyimpan file. Parcel, secara default, memonitor perubahan file.

Beginilah tampilan halaman setelah penataan.


Halaman bergaya

Tetap hanya menampilkan di sini nama hari ini dalam seminggu. Dalam menyelesaikan masalah ini, kami akan menggunakan tim impor dan ekspor . Ini akan menguji kemampuan Parcel untuk bekerja dengan mekanisme JavaScript modern.

Buat file today.js dan ekspor darinya sebuah fungsi yang mengembalikan, menggunakan array dengan nama hari dalam seminggu, nama hari ini:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

Perhatikan bahwa fungsi getDay hari pertama dalam seminggu.

Kami mengekspor fungsi today.js dari getDay . Sekarang mari kita pergi ke file index.js dan impor fungsi ini ke dalamnya dari file today.js . Ini akan menyebabkan file today.js diproses selama perakitan proyek.

 import { getDay } from './today'; 

Parcel, tanpa pengaturan tambahan, mendukung sintaksis modul ES6 , sehingga kita dapat menggunakan perintah impor dan ekspor dalam file JS.

Sekarang kita hanya harus memilih elemen <span> sesuai dan meneruskan nilai yang dikembalikan oleh fungsi getDay . Tambahkan kode berikut ke index.html :

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

Setelah menyimpan file, proyek akan dibangun kembali, halamannya di browser akan berubah.


Proyek selesai

▍Membangun proyek untuk produksi

Kami membuat aplikasi, dan sekarang kami ingin meletakkannya di suatu tempat. Itu bisa server kami sendiri, atau sesuatu seperti Surge atau Sekarang , yang membuat mempublikasikan proyek web sesederhana mungkin. Pada saat yang sama, kita perlu kode proyek untuk dikompilasi dan diperkecil.

Untuk membawa proyek ke dalam bentuk yang sesuai untuk publikasi, kita hanya perlu satu perintah:

 parcel build index.html 

Setelah menjalankan perintah ini, konsol akan mendapatkan sesuatu yang mirip dengan yang ditunjukkan pada gambar berikut.


Perakitan proyek

Sekarang kami memiliki sumber daya aplikasi, siap untuk menggunakannya dalam produksi. Di sini Anda dapat membaca detail tentang bagaimana Parcel mengumpulkan versi produksi proyek, dan menemukan beberapa tips yang akan meningkatkan efisiensi bekerja dengan bundler ini.

Ringkasan

Saya sudah mengatakan ini beberapa kali, tetapi saya akan mengulanginya lagi: Parcel adalah alat yang hebat. Hal ini memungkinkan Anda untuk mengumpulkan proyek, mengkompilasi kode, memberikan server pengembangan programmer, sumber daya preprocesses dan postprocesses, mengecilkan kode. Dan kemampuannya tidak terbatas pada ini. Di sini kami melihat contoh yang sangat sederhana, tetapi saya berharap ini memungkinkan Anda untuk merasakan kemampuan Parcel dan membantu mempelajari cara menggunakan bundler ini dalam proyek Anda.

Pembaca yang budiman! Bundler mana yang Anda gunakan?