Saya akhirnya memahami alat binaan bahagian depan. Anda juga boleh.

Alat bina bahagian depan boleh membingungkan bahkan untuk pembangun berpengalaman seperti saya. Penyelesaiannya adalah dengan memahami bagaimana mereka bekerja - dan bekerjasama - pada tahap konseptual.

Artikel ini membentangkan pendekatan pendapat saya untuk memahami alat binaan bahagian depan. Daripada menyelami kod, saya akan membimbing anda melalui model mental saya tentang bagaimana alat ini berfungsi dan apa yang mereka capai.

Jangan terancam oleh keadaan canggih

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch ... terdapat begitu banyak alat binaan front-end di luar sana sehingga nampaknya mustahil untuk dijaga.

Kuncinya adalah tidak menakutkan. Semua projek ini dirancang untuk menjadikan hidup anda lebih mudah.

Untuk memahami apa, mengapa, dan bagaimana alat ini, anda hanya perlu memahami beberapa konsep.

Konsep # 1 - Dikotomi inti alat binaan adalah "memasang berbanding melakukan"

Alat binaan melakukan dua perkara:

  1. Pasang barang
  2. Buat perkara

Soalan pertama untuk bertanya kepada diri sendiri ketika menghadapi alat binaan baru adalah: "Adakah alat ini bertujuan untuk memasang barang untuk saya, atau melakukan sesuatu untuk saya?"

Alat "Memasang" seperti npm, Bower, dan Yeoman dapat memasang apa sahaja. Mereka boleh memasang perpustakaan depan seperti Angular.js atau React.js. Mereka boleh memasang pelayan untuk persekitaran dev anda. Mereka boleh memasang perpustakaan ujian. Mereka juga membantu anda memasang alat binaan bahagian depan yang lain.

Ringkasnya, mereka memasang kebanyakan perkara berkaitan kod yang boleh anda fikirkan.

Alat "melakukan" seperti Grunt, Webpack, Require.js, Brunch, dan Gulp jauh lebih rumit. Matlamat alat "melakukan" adalah untuk mengotomatisasi semua tugas rawan kesalahan dan ralat dalam pembangunan web. Perkara yang mereka lakukan kadangkala disebut "tugas".

Untuk melakukan "tugas" ini, mereka sering menggunakan ekosistem pakej dan pemalam mereka sendiri. Setiap alat menulis tugas dengan cara yang berbeza. Alat ini juga tidak semua melakukan perkara yang sama. Beberapa alat "melakukan" cuba menangani segala tugas yang anda laksanakan (Grunt, Gulp, dll). Yang lain memberi tumpuan kepada satu perkara, seperti menangani kebergantungan Javascript (Browserify, Require.js, dll).

Kadang-kadang anda akhirnya menggunakan beberapa alat ini dalam projek yang sama.

Berikut adalah senarai pendek "tugas" yang saya automatik dengan alat "melakukan" ini:

  1. Mengganti rentetan teks dalam fail
  2. Membuat folder dan memindahkan fail ke folder tersebut
  3. Menjalankan ujian unit saya dengan satu arahan
  4. Menyegarkan semula penyemak imbas saya semasa saya menyimpan fail
  5. Menggabungkan semua fail JavaScript saya menjadi satu, dan semua fail CSS saya menjadi satu
  6. Mengurangkan fail JavaScript dan CSS saya yang digabungkan
  7. Mengubah penempatan tag pada halaman html

Setelah anda memahami bahawa alat memasang barang atau melakukan sesuatu, mengkategorikannya menjadi lebih mudah:

Konsep # 2 - Nenek moyang semua alat binaan ialah Node dan npm

Node dan npm memasang dan menjalankan semua alat binaan ini, jadi selalu ada jejaknya dalam projek anda. Oleh kerana itu, banyak pembangun cuba menggunakan kedua-dua alat ini sebanyak mungkin sebelum mereka memasang alat tambahan.

Node dan NPM tergolong dalam dikotomi “build” dan “do” kami. Node adalah alat "lakukan", dan npm adalah alat "pasang".

npm boleh memasang perpustakaan seperti Angular.js atau React.js. Ia juga dapat memasang pelayan untuk menjalankan aplikasi anda secara tempatan untuk pembangunan. Bahkan boleh memasang alat untuk melakukan perkara seperti meminimumkan kod anda.

Node, sebaliknya, "melakukan" perkara untuk anda, seperti menjalankan fail JavaScript, pelayan, dan banyak lagi.

Sekiranya anda memerlukan tempat untuk mula belajar, mulailah dengan Node + npm, dan tinggal di sana sebentar. Apabila projek anda cukup besar, anda akan mencapai had apa yang dapat automatik Node dan npm untuk anda. Pada ketika itu anda boleh memasukkan alat binaan lain secara organik.

Konsep # 3 - Binaan hanyalah versi siap aplikasi anda

Pembangun sering memecah JavaScript dan CSS ke dalam fail yang berasingan. Fail berasingan membolehkan anda memberi tumpuan untuk menulis lebih banyak kod modular yang melakukan satu perkara. Fail yang melakukan satu perkara mengurangkan beban kognitif anda. (Sekiranya anda menganggap fail berasingan lebih membingungkan daripada satu fail besar, cuba gunakan fail baris 5000, dan anda akan berubah fikiran dengan cepat?)

Tetapi apabila tiba masanya untuk memindahkan aplikasi anda ke pengeluaran, mempunyai banyak fail JavaScript atau CSS tidak sesuai. Ketika pengguna mengunjungi laman web anda, setiap fail anda akan memerlukan permintaan HTTP tambahan, yang menjadikan laman web anda lebih lambat untuk dimuat.

Oleh itu, untuk membetulkannya, anda boleh membuat "build" aplikasi kami, yang menggabungkan semua fail CSS anda menjadi satu fail, dan melakukan hal yang sama dengan JavaScript anda. Dengan cara ini, anda meminimumkan jumlah dan saiz fail yang diterima pengguna. Untuk membuat “build” ini, anda menggunakan “build tool”.

Berikut adalah tangkapan skrin aplikasi yang sedang dibangunkan. Perhatikan bagaimana ia mempunyai 5 tag dan 3 tag? Sekiranya anda melihat di sebelah kiri, perhatikan folder PEMBANGUNAN mempunyai 10 fail di dalamnya?

Dan di bawah ini adalah aplikasi yang sama setelah alat binaan berjaya.

Perhatikan bagaimana kita hanya mempunyai satu tag skrip dan satu tag pautan? Dan sekarang folder PRODUCTION hanya mempunyai 4 fail, berbanding dengan folder DEVELOPMENT 10.

Aplikasi ini sesuai untuk baris yang sama. Kami baru memadatkannya ke dalam pakej kecil yang rapi yang kami sebut "bina."

Anda mungkin tertanya-tanya mengapa binaan itu sangat berharga, jika semua itu menjimatkan masa pengguna anda beberapa milisaat. Sekiranya anda membuat laman web hanya untuk diri sendiri atau beberapa orang lain, anda tidak perlu bersusah payah dengan ini. Menjana pembangunan projek anda hanya perlu untuk laman web dengan trafik tinggi (atau laman web yang anda harap akan menjadi lalu lintas tinggi tidak lama lagi?).

Sekiranya anda baru belajar pembangunan, atau hanya membuat laman web dengan lalu lintas yang sangat rendah, menghasilkan binaan mungkin tidak sesuai dengan masa anda.

Konsep # 4 - Garis antara "pasang" dan "lakukan" boleh kabur

Tidak ada alat yang hanya berfungsi satu dan bukan yang lain. Mereka semua melakukan campuran “install” dan “do”. Tetapi secara amnya, alat cenderung melakukan lebih banyak daripada yang lain.

Kadang-kadang alat "pasang" akan menjalankan fail. npm sering melakukan ini. npm dapat menjalankan perintah dan skrip juga - bukan hanya memasang fail. Alat seperti Yeoman memasang aplikasi boilerplate yang telah dibina sebelumnya di komputer anda, tetapi juga menghasilkan fail baru secara dinamik seperti yang diperlukan, mengaburkan garis antara pemasangan dan lakukan.

Konsep # 5 - Tidak ada satu gabungan alat yang betul

Kombinasi alat yang anda gunakan boleh bergantung sepenuhnya kepada anda.

Anda boleh memilih untuk tidak menggunakan alat apa pun. Perlu diingat bahawa menyalin, menampal, meminimumkan, memulakan pelayan, dan semua perkara lain yang terlibat dengan cepat boleh menjadi luar biasa.

Atau anda hanya boleh menggunakan Node dan npm tanpa alat tambahan. Ini bagus untuk pemula, tetapi ketika projek anda berkembang, ia mungkin akan terasa seperti proses manual.

Atau anda boleh memilih untuk menggunakan beberapa alat lain di atas Node dan npm dalam projek anda. Oleh itu, aplikasi anda akan menggunakan Node + npm sebagai intinya, dan mungkin Grunt + Bower atau Webpack atau Gulp + Bower.

Menggunakan beberapa kombinasi alat seperti ini di atas Node + npm membolehkan anda mengautomasikan banyak tugas dalam projek anda. Harga yang anda bayar adalah bahawa alat ini mempunyai keluk pembelajaran yang curam.

Konsep # 6 - Alat binaan mempunyai keluk pembelajaran yang curam, jadi hanya pelajari apa yang perlu

Membangun aplikasi cukup sukar. Anda mungkin menggunakan bahasa baru atau kerangka kerja baru. Atau anda mungkin mempunyai logik perniagaan yang benar-benar rumit. Oleh itu, menggabungkan alat binaan dapat menambahkan keseluruhan kerumitan tambahan pada projek anda. Ini benar terutamanya ketika projek di mana orang lain menulis kod yang berkaitan dengan alat binaan.

Nasihat saya adalah untuk belajar dengan tepat apa yang anda perlukan untuk melakukan tugas anda dan tidak ada yang lain.

Cara terbaik untuk mempelajari perkara baru adalah apabila anda mempunyai tugas dunia nyata yang perlu anda laksanakan. Sebagai contoh, jangan belajar cara menyalin fail dengan Grunt untuk kepentingannya. Sebaliknya, tunggu sehingga projek anda benar-benar memerlukannya, dan kemudian cari tahu.

Ingat: kerumitan pramatang akan melambatkan anda.

Konsep # 7 - Semua alat binaan mempunyai matlamat yang sama: untuk membuat anda bahagia dengan mengautomasikan banyak tugas kasar

Anda menggunakan alat binaan anda dengan sepenuhnya ketika anda mencapai apa yang saya panggil "alat binaan nirvana." Ketika itulah anda menyimpan fail, atau menjalankan satu perintah, dan banyak tugas berlaku "secara automatik" untuk anda.

Sekiranya alat binaan anda masih memerlukan anda memindahkan fail secara manual, mengubah nilai, atau menjalankan perintah untuk mendapatkan binaan baru, maka anda belum mencapai nirvana alat binaan.

Salah satu faedah terbesar alat bina adalah dengan hanya menyimpan fail, anda dapat mencetuskan pembuatan aplikasi baru dan mengirimkannya ke penyemak imbas anda. Ini dapat mempercepat aliran kerja pengembangan bahagian depan anda secara dramatik.

Oleh itu, berapa banyak usaha yang harus anda lakukan untuk mengkonfigurasi dan menyiapkan alat binaan anda? Mudah: berhenti apabila anda berpuas hati dengan apa yang dilakukannya untuk anda.

Konsep # 8 - Bukan hanya anda. Dokumentasi sering mengerikan.

Bukan saya, saya berjanji. Bagi kebanyakan alat ini, dokumentasi agak kurang. Kadang-kadang memikirkan bagaimana melakukan tugas asas boleh menjadi sukar.

Perlu diingat bahawa terdapat sedikit resipi yang telah ditetapkan untuk alat binaan. Anda akan melihat orang mendapat hasil yang sama dengan cara yang sangat berbeza - kadang-kadang semuanya sebagai jawapan kepada soalan StackOverflow yang sama!

Walaupun ini menjengkelkan, ini juga memberi anda peluang untuk melenturkan otot pengekod anda dan melaksanakan sesuatu yang kreatif.

Lagipun, bukankah itu sebabnya kita melakukan ini?

Terima kasih kerana membaca ini! Mudah-mudahan beberapa perkara ini menjadikan alat binaan mendekati pengalaman yang tidak membingungkan. Sekiranya tidak, saya dengan senang hati menyelesaikan sebarang pertanyaan (atau membetulkan kesilapan yang anda dapati di sini), tweet saya @Roneesh!

Dan tentu saja, jika anda menyukai apa yang anda baca, pastikan ❤ di bawah dan kongsi dengan rakan anda. Sebagai penulis, ini bermaksud dunia bagi saya!