Alat Pembangunan Bahagian Depan Popular yang Perlu Anda Ketahui

Sekiranya anda baru memulakan JavaScript, jumlah alat dan teknologi yang akan anda dengar mungkin sangat banyak. Dan anda mungkin sukar untuk menentukan alat yang sebenarnya anda perlukan.

Atau mungkin anda sudah biasa dengan alat ini, tetapi anda tidak terlalu memikirkan masalah apa yang mereka selesaikan dan betapa sengsara hidup anda tanpa bantuan mereka.

Saya percaya adalah penting bagi Jurutera Perisian dan Pembangun untuk memahami tujuan alat yang kita gunakan setiap hari.

Itulah sebabnya, dalam artikel ini, saya melihat NPM, Babel, Webpack, ESLint, dan CircleCI dan saya cuba menjelaskan masalah yang mereka selesaikan dan bagaimana mereka menyelesaikannya.

NPM

NPM adalah pengurus pakej lalai untuk pengembangan JavaScript. Ini membantu anda mencari dan memasang pakej (program) yang boleh anda gunakan dalam program anda.

Anda boleh menambahkan npm ke projek hanya dengan menggunakan perintah " npm init ". Apabila anda menjalankan perintah ini, ia akan membuat fail " package.json " dalam direktori semasa. Ini adalah fail di mana pergantungan anda disenaraikan, dan npm melihatnya sebagai kad pengenalan projek.

Anda boleh menambahkan kebergantungan dengan perintah " npm install (package_name) ".

Semasa anda menjalankan perintah ini, npm pergi ke pendaftaran jauh dan memeriksa apakah ada pakej yang dikenal pasti dengan nama pakej ini. Sekiranya ia dapati, entri kebergantungan baru akan ditambahkan ke package.json anda dan pakej, dengan kebergantungan dalamannya, dimuat turun dari pendaftaran.

Anda boleh mendapatkan pakej atau pergantungan yang dimuat turun di bawah folder "node_modules" . Perlu diingat bahawa selalunya ia menjadi sangat besar - jadi pastikan untuk menambahkannya ke .gitignore .

Cara memastikan perpustakaan JavaScript anda terkini - LogRocket Blog

NPM bukan sahaja memudahkan proses mencari dan memuat turun pakej tetapi juga memudahkan kerja kolaboratif pada projek.

Tanpa NPM, sukar untuk menguruskan pergantungan luaran. Anda perlu memuat turun versi yang betul dari setiap kebergantungan dengan tangan apabila anda menyertai projek yang ada. Dan itu akan menjadi kerumitan yang nyata.

Dengan bantuan npm, anda hanya boleh menjalankan "install npm" dan ia akan memasang semua dependensi luaran untuk anda. Kemudian anda boleh menjalankannya semula bila-bila masa seseorang dalam pasukan anda menambahkan yang baru.

Babel

Babel adalah penyusun JavaScript atau transpiler yang menerjemahkan kod ECMAScript 2015+ menjadi kod yang dapat difahami oleh mesin JavaScript yang lebih lama.

Babel adalah penyusun Javascript yang paling popular, dan kerangka kerja seperti Vue dan React menggunakannya secara lalai. Walaupun begitu, konsep yang akan kita bicarakan di sini tidak hanya berkaitan dengan Babel dan akan berlaku untuk penyusun JavaScript mana pun.

Mengapa anda memerlukan penyusun?

"Mengapa kita memerlukan penyusun, bukankah JavaScript merupakan bahasa yang ditafsirkan?" anda mungkin bertanya sama ada anda biasa dengan konsep bahasa yang disusun dan ditafsirkan.

Memang benar bahawa kita biasanya memanggil sesuatu "penyusun" jika ia menerjemahkan kod yang dapat dibaca manusia kepada binari yang boleh dilaksanakan yang dapat difahami oleh CPU. Tetapi itu tidak berlaku di sini.

Istilah transpiler mungkin lebih sesuai kerana ia adalah subset penyusun: Transpilers adalah penyusun yang menterjemahkan kod dari bahasa pengaturcaraan ke bahasa lain (dalam contoh ini, dari JS moden ke versi yang lebih lama).

JavaScript adalah bahasa penyemak imbas. Tetapi ada masalah dengan penyemak imbas: Keserasian silang. Alat JavaScript dan bahasa itu sendiri berkembang pesat dan banyak penyemak imbas gagal menandingi kadar itu. Ini mengakibatkan masalah keserasian.

Anda mungkin mahu menulis kod dalam versi JavaScript yang paling baru supaya anda dapat menggunakan ciri barunya. Tetapi jika penyemak imbas yang dijalankan oleh kod anda tidak menerapkan beberapa ciri baru dalam mesin JavaScriptnya, kod tersebut tidak akan dijalankan dengan betul pada penyemak imbas tersebut.

Ini adalah masalah yang rumit kerana setiap penyemak imbas menggunakan fitur dengan kelajuan yang berbeza. Dan walaupun mereka melaksanakan ciri baru itu, akan selalu ada orang yang menggunakan versi penyemak imbas mereka yang lebih lama.

Jadi bagaimana jika anda ingin dapat menggunakan ciri terkini tetapi juga mahu pengguna anda melihat halaman tersebut tanpa masalah?

Sebelum Babel, kami menggunakan polyfill untuk menjalankan versi lama kod tertentu jika penyemak imbas tidak menyokong ciri moden. Dan semasa anda menggunakan Babel, ia menggunakan polyfill di belakang tabir dan tidak menghendaki anda melakukan apa-apa.

Bagaimana transpiler / penyusun berfungsi?

Babel berfungsi sama dengan penyusun lain. Ini mempunyai peringkat penghuraian, transformasi, dan pembuatan kod.

Kami tidak akan membahas secara mendalam di sini bagaimana ia berfungsi, kerana penyusun adalah perkara yang rumit. Tetapi untuk memahami asas bagaimana penyusun berfungsi, anda boleh melihat projek penyusun super-kecil. Hal ini juga disebutkan dalam dokumentasi rasmi Babel sebagai membantu dalam memahami bagaimana Babel berfungsi.

Kita biasanya dapat mengetahui tentang plugin dan pratetap Babel. Plugin adalah potongan yang digunakan Babel di belakang tabir untuk menyusun kod anda ke versi JavaScript yang lebih lama. Anda boleh memikirkan setiap ciri moden sebagai pemalam. Anda boleh pergi ke pautan ini untuk melihat senarai lengkap pemalam.

Pratetap ialah koleksi pemalam. Sekiranya anda ingin menggunakan Babel untuk projek React, anda boleh menggunakan @ babel / preset-react yang telah dibuat sebelumnya yang mengandungi plugin yang diperlukan.

Anda boleh menambah pemalam dengan mengedit fail konfigurasi Babel.

Adakah anda memerlukan Babel untuk Aplikasi React anda?

Untuk React, anda memerlukan penyusun kerana kod React umumnya menggunakan JSX dan JSX perlu disusun. Perpustakaan juga dibina berdasarkan konsep menggunakan sintaks ES6.

Nasib baik, apabila anda membuat projek dengan create-react-app , ia dilengkapi dengan Babel yang sudah dikonfigurasi dan anda biasanya tidak perlu mengubah konfigurasi.

Contoh penyusun dalam tindakan

Laman web Babel mempunyai penyusun dalam talian dan sangat berguna untuk memahami bagaimana ia berfungsi. Cukup masukkan beberapa kod dan analisis keluarannya.

Beg Web

Webpack adalah penyusun modul statik. Semasa anda membuat projek baru, kebanyakan kerangka kerja / perpustakaan JavaScript menggunakannya sekarang ini.

Sekiranya frasa "penyusun modul statik" terdengar membingungkan, teruskan membaca kerana saya mempunyai beberapa contoh hebat untuk membantu anda memahami.

Mengapa anda memerlukan bundler?

Dalam aplikasi web anda akan mempunyai banyak fail. Ini terutama berlaku untuk Aplikasi Halaman Tunggal (React, Vue, Angular), dengan masing-masing mempunyai kebergantungan masing-masing.

Apa yang saya maksudkan dengan ketergantungan adalah pernyataan import - jika fail A perlu mengimport fail B untuk berjalan dengan baik, maka kita mengatakan A bergantung pada B.

Dalam projek kecil, anda boleh menangani kebergantungan modul dengan tag. Tetapi apabila projek itu semakin besar, kebergantungan dengan cepat menjadi sukar untuk dikendalikan.

Mungkin, yang lebih penting lagi, membahagikan kod menjadi beberapa fail menjadikan laman web anda dimuat dengan lebih perlahan. Ini kerana penyemak imbas perlu menghantar lebih banyak permintaan berbanding satu fail besar, dan laman web anda mula menggunakan banyak jalur lebar, kerana tajuk HTTP.

Kami, sebagai pembangun mahu kod kami menjadi modular. Kami membahagikannya kepada beberapa fail kerana kami tidak mahu bekerja dengan satu fail dengan ribuan baris. Namun, kami juga mahu laman web kami berprestasi, menggunakan lebar jalur yang lebih sedikit, dan memuat dengan cepat.

Jadi sekarang, kita akan melihat bagaimana Webpack menyelesaikan masalah ini.

Bagaimana Webpack berfungsi

Semasa kami berbicara tentang Babel, kami menyebutkan bahawa kod JavaScript perlu diubah sebelum penyebaran.

Tetapi menyusun dengan Babel bukanlah satu-satunya operasi yang anda perlukan sebelum mengerjakan projek anda.

Anda biasanya perlu mengesahkannya, melancarkannya, menyusun SASS atau SCSS ke CSS jika anda menggunakan praprosesor, menyusun TypeScript jika anda menggunakannya ... dan seperti yang anda lihat, senarai ini dapat bertahan lama dengan mudah.

Anda tidak mahu menangani semua arahan dan operasi tersebut sebelum setiap penyebaran. Alangkah baiknya jika ada alat yang melakukan semua itu untuk anda dengan cara yang betul dan betul.

Berita baik - ada: Webpack.

Webpack juga menyediakan ciri seperti pelayan tempatan dengan tambah nilai panas (mereka menyebutnya penggantian modul panas) untuk menjadikan pengalaman pembangunan anda lebih baik.

Jadi apa yang memuat semula panas? Ini bermaksud bahawa setiap kali anda menyimpan kod anda, kod itu akan dikompilasi dan disebarkan ke pelayan HTTP tempatan yang berjalan di mesin anda. Dan setiap kali fail berubah, ia akan menghantar mesej ke penyemak imbas anda sehingga anda tidak perlu memuat semula halaman.

Sekiranya anda pernah menggunakan "npm run serve", "npm start" atau "npm run dev", perintah tersebut juga akan memulakan pelayan dev Webpack di belakang layar.

Webpack bermula dari titik masuk projek anda (indeks) dan menghasilkan Abstrak Syntax Tree fail. Anda boleh menganggapnya sebagai menguraikan kod. Operasi ini juga dilakukan dalam penyusun, yang kemudian mencari penyataan import secara berulang untuk menghasilkan grafik kebergantungan.

Ia kemudian menukar fail menjadi IIFE untuk memodulasi mereka (ingat, meletakkan kod di dalam fungsi membatasi skopnya). Dengan melakukan ini, mereka memodulasi fail dan memastikan pemboleh ubah dan fungsi tidak dapat diakses oleh fail lain.

Tanpa operasi ini, seperti menyalin dan menampal kod fail yang diimport dan fail tersebut akan mempunyai ruang lingkup yang sama.

Webpack melakukan banyak perkara canggih lain di belakang tabir, tetapi ini cukup untuk memahami asasnya.

Bonus - ESLint

Kualiti kod adalah penting dan membantu memastikan projek anda dapat dikendalikan dan dapat dilanjutkan dengan mudah. Walaupun sebilangan besar pemaju menyedari kepentingan pengekodan bersih, kita kadang-kadang cenderung untuk mengabaikan akibat jangka panjang di bawah tekanan tarikh akhir.

Banyak syarikat memutuskan piawaian pengekodan dan mendorong pemaju untuk mematuhi piawaian tersebut. Tetapi bagaimana anda dapat memastikan bahawa kod anda memenuhi standard?

Anda boleh menggunakan alat seperti ESLint untuk menguatkuasakan peraturan dalam kod. Sebagai contoh, anda boleh membuat peraturan untuk menegakkan atau melarang penggunaan titik koma dalam kod JavaScript anda. Sekiranya anda melanggar peraturan, ESLint menunjukkan ralat dan kodnya tidak dapat disusun - jadi tidak mungkin mengabaikannya melainkan anda melumpuhkan peraturan tersebut.

Linters boleh digunakan untuk menegakkan piawaian dengan menulis peraturan khusus. Tetapi anda juga boleh menggunakan konfigurasi ESLint yang telah dibuat oleh syarikat berteknologi besar untuk membantu para penyelidik membiasakan diri dengan menulis kod bersih.

Anda boleh melihat konfigurasi ESLint Google di sini - ini adalah pilihan saya.

ESLint membantu anda membiasakan diri dengan amalan terbaik, tetapi itu bukan satu-satunya faedahnya. ESLint juga memberi amaran kepada anda tentang kemungkinan bug / ralat dalam kod anda supaya anda dapat mengelakkan kesalahan yang biasa.

Bonus - CI / CD (CircleCI)

Integrasi / Pembangunan Berterusan telah mendapat banyak populariti dalam beberapa tahun kebelakangan ini kerana banyak syarikat telah menerapkan prinsip Agile.

Alat seperti Jenkins dan CircleCI membolehkan anda mengautomasikan penggunaan dan pengujian perisian anda secara automatik sehingga anda dapat menggunakan lebih kerap dan boleh dipercayai tanpa melalui proses pembinaan yang sukar dan rawan kesalahan oleh anda sendiri.

Saya menyebut CircleCI sebagai produk di sini kerana percuma dan sering digunakan dalam projek JavaScript. Ia juga senang digunakan.

Mari kita lihat contohnya: Katakan anda mempunyai pelayan penyebaran / QA dan repositori Git anda. Anda ingin menerapkan perubahan ke pelayan penyebaran / QA anda, jadi berikut adalah proses contoh:

  1. Tolak perubahan ke Git
  2. Sambung ke pelayan
  3. Buat bekas Docker dan jalankan
  4. Tarik perubahan ke pelayan, muat turun semua kebergantungan (pemasangan npm)
  5. Jalankan ujian untuk memastikan tidak ada yang rosak
  6. Gunakan alat seperti ESLint / Sonar untuk memastikan kualiti kod
  7. Gabungkan kod jika semuanya baik-baik saja

Dengan bantuan CircleCI, anda boleh melakukan semua operasi ini secara automatik. Anda boleh mengaturnya dan mengkonfigurasi untuk melakukan semua operasi di atas setiap kali anda melakukan perubahan ke Git. Ia akan menolak desakan sekiranya ada yang salah, contohnya ujian yang gagal.

Saya tidak akan mengetahui perincian cara mengkonfigurasi CircleCI kerana artikel ini lebih banyak mengenai "Mengapa?" setiap alat. Tetapi jika anda berminat untuk belajar lebih banyak dan melihatnya dalam tindakan, anda boleh melihat siri tutorial ini.

Kesimpulannya

Dunia JavaScript berkembang pesat dan alat baru semakin popular setiap tahun.

Sangat mudah untuk bertindak balas terhadap perubahan ini dengan hanya belajar menggunakan alat - kita sering terlalu sibuk untuk meluangkan masa dan memikirkan sebab mengapa alat itu menjadi popular atau masalah apa yang diselesaikan.

Dalam artikel ini, saya memilih alat yang saya rasa paling popular dan berkongsi pendapat saya mengenai kepentingannya. Saya juga ingin membuat anda berfikir tentang masalah yang mereka selesaikan dan bukan hanya perincian cara menggunakannya.

Sekiranya anda menyukai artikel itu, anda boleh menyemak dan melanggan blog saya di mana saya sering menulis. Juga, beritahu saya pendapat anda dengan memberi komen supaya kami dapat bertukar pendapat atau anda boleh memberitahu saya alat lain yang anda suka gunakan :)