Menyediakan projek ES6 menggunakan Babel dan Webpack

Dalam artikel ini, kita akan melihat membuat persediaan binaan untuk mengendalikan JavaScript moden (berjalan dalam pelayar web) menggunakan Babel dan Webpack.

Ini diperlukan untuk memastikan bahawa kod JavaScript moden kami khususnya dibuat serasi dengan pelbagai pelayar yang lebih luas daripada yang mungkin.

JavaScript, seperti kebanyakan teknologi yang berkaitan dengan web, berkembang sepanjang masa. Pada hari -hari tua yang baik, kita boleh menjatuhkan beberapa tag <script> ke dalam halaman, mungkin termasuk jQuery dan beberapa plugin, kemudian menjadi baik untuk pergi. <p> Walau bagaimanapun, sejak pengenalan ES6, perkara -perkara telah semakin rumit. Sokongan penyemak imbas untuk ciri bahasa yang lebih baru selalunya tampal, dan sebagai aplikasi JavaScript menjadi lebih bercita -cita tinggi, pemaju mula menggunakan modul untuk mengatur kod mereka. Sebaliknya, ini bermakna jika anda menulis JavaScript moden hari ini, anda perlu memperkenalkan langkah membina ke dalam proses anda. <p> seperti yang anda lihat dari pautan di bawah, menukar dari ES6 hingga ES5 secara dramatik meningkatkan bilangan penyemak imbas yang dapat kami sokong. <p> keserasian ES6 <ul> <li> keserasian ES5 <li> Tujuan sistem binaan adalah untuk mengautomasikan aliran kerja yang diperlukan untuk mendapatkan kod kami siap untuk penyemak imbas dan pengeluaran. Ini mungkin termasuk langkah -langkah seperti transpiling kod ke standard yang berbeza, menyusun SASS ke CSS, fail bundling, minifikasi dan kod pemampatan, dan banyak lagi. Untuk memastikan ini secara konsisten berulang, sistem binaan diperlukan untuk memulakan langkah -langkah dalam urutan yang diketahui dari satu perintah. <p> Takeaways Key <h2 > Gunakan Babel dan Webpack untuk menubuhkan projek JavaScript moden, memastikan kod ES6 serasi merentasi pelbagai pelayar web yang lebih luas. <ul > <li> Mulailah dengan membuat struktur projek dengan fail pakej.json, dan atur kod ke dalam SRC dan direktori awam untuk sumber dan javascript yang dipindahkan masing -masing. <li> Pasang Babel ke Transpile ES6 ke ES5, mensasarkan versi penyemak imbas tertentu, dan mengautomasikan proses ini menggunakan skrip NPM. <li> Melaksanakan modul ES6 untuk mengurus dan memodulasi kod JavaScript dengan berkesan, walaupun keserasian dengan pelayar yang lebih tua seperti IE11 tetap terhad. <li> Mengintegrasikan Webpack untuk membungkus modul JavaScript ke dalam fail tunggal atau berganda, mengurangkan permintaan pelayan dan mengoptimumkan masa beban. <li> Meningkatkan aliran kerja pembangunan dengan ciri-ciri menonton Webpack dan Dev-Server untuk membina semula dan menyegarkan semula pelayar secara automatik. <li> Prasyarat Untuk mengikuti, anda perlu mempunyai kedua -dua Node.js dan NPM yang dipasang (mereka dibungkus bersama). Saya akan mengesyorkan menggunakan pengurus versi seperti NVM untuk menguruskan pemasangan nod anda (inilah caranya), dan jika anda ingin mendapatkan bantuan untuk mengatasi NPM, kemudian lihat tutorial NPM yang mesra SitePoint.<h2 > Sediakan <p> Buat folder root di suatu tempat di komputer anda dan navigasi ke dalamnya dari baris terminal/arahan anda. Ini akan menjadi folder <soot> anda. <p> Buat fail Package.json dengan ini: <pre ><span >npm init -y <p> <em> NOTA: Bendera -y membuat fail dengan tetapan lalai, dan bermakna anda tidak perlu melengkapkan mana -mana butiran biasa dari baris arahan. Mereka boleh diubah dalam editor kod anda kemudian jika anda mahu. <p> Di dalam folder <goot> anda, buat direktori src, src/js, dan awam. Folder SRC/JS akan berada di mana kami akan meletakkan kod sumber yang tidak diproses kami, dan folder awam akan berada di mana kod transpil akan berakhir. <h2 > transpiling dengan babel <p> Untuk mendapatkan diri kita, kita akan memasang Babel-CLI, yang memberikan keupayaan untuk memindahkan ES6 ke ES5, dan Babel-Preset-ENV, yang membolehkan kita menargetkan versi penyemak imbas tertentu dengan kod yang ditransfer. <pre ><span >npm install babel-cli babel-preset-env --save-dev <p> anda sekarang harus melihat perkara berikut dalam pakej.json anda: <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p> Walaupun kita berada dalam fail Package.json, mari kita ubah bahagian skrip untuk membaca seperti ini: <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, <p> Ini memberi kita keupayaan untuk memanggil Babel melalui skrip, dan bukan secara langsung dari terminal setiap kali. Jika anda ingin mengetahui lebih lanjut mengenai skrip NPM dan apa yang boleh mereka lakukan, lihat tutorial SitePoint ini. <p> Akhir sekali, sebelum kita dapat menguji sama ada Babel melakukan perkara itu, kita perlu membuat fail konfigurasi .babelrc. Inilah pakej Babel-Preset-ENV kami yang akan dirujuk untuk parameter transpilnya. 3 <p> Ini akan menubuhkan Babel untuk memindahkan dua versi terakhir setiap penyemak imbas, ditambah safari pada V7 atau lebih tinggi. Pilihan lain boleh didapati bergantung kepada penyemak imbas yang anda perlukan untuk menyokong. <pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} <p> Dengan yang disimpan, kita kini boleh menguji perkara dengan fail JavaScript yang menggunakan ES6. Untuk tujuan artikel ini, saya telah mengubahsuai salinan LeftPad untuk menggunakan sintaks ES6 di beberapa tempat: literals templat, fungsi anak panah, const dan biarkan. <p> simpan ini sebagai src/js/leftpad.js dan dari terminal anda jalankan berikut: <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} <p> Jika semua adalah seperti yang dimaksudkan, dalam folder awam anda kini harus mencari fail baru yang dipanggil JS/LeftPad.js. Jika anda membukanya, anda akan mendapati ia tidak lagi mengandungi sintaks ES6 dan kelihatan seperti ini: <pre ><span >npm run build <p> Mengatur kod anda dengan modul ES6 <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >var cache = ["", " ", " ", " ", " ", " ", " ", " ", " ", " "]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) return function () { cache<span >[len] + str; <span >}; <span >var pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch;else break; <span >} <span >return "" + pad + str; <span >} <h2 > Modul ES6 adalah fail JavaScript yang mengandungi fungsi, objek atau nilai primitif yang anda ingin sediakan untuk fail JavaScript yang lain. Anda mengeksport dari satu, dan mengimport ke yang lain. Sebarang projek JavaScript moden yang serius harus dipertimbangkan menggunakan modul. Mereka membolehkan anda memecahkan kod anda ke dalam unit mandiri dan dengan itu membuat perkara lebih mudah untuk dikekalkan; Mereka membantu anda mengelakkan pencemaran ruang nama; Dan mereka membantu menjadikan kod anda lebih mudah alih dan boleh diguna semula. <p> Walaupun majoriti sintaks ES6 boleh didapati secara meluas dalam pelayar moden, ini belum lagi berlaku dengan modul. Pada masa penulisan, mereka boleh didapati di Chrome, Safari (termasuk versi iOS terkini) dan Edge; Mereka tersembunyi di belakang bendera di Firefox dan Opera; Dan mereka tidak tersedia (dan mungkin tidak akan) dalam IE11, atau kebanyakan peranti mudah alih. <p> Di bahagian seterusnya, kita akan melihat bagaimana kita dapat mengintegrasikan modul ke dalam persediaan binaan kami. <h3 > Eksport <St> Kata kunci eksport adalah apa yang membolehkan kami membuat modul ES6 kami tersedia untuk fail lain, dan ia memberi kami dua pilihan untuk berbuat demikian - dinamakan dan lalai. Dengan Eksport yang Dinamakan, anda boleh mempunyai pelbagai eksport setiap modul, dan dengan eksport lalai anda hanya mempunyai satu setiap modul. Eksport yang dinamakan amat berguna di mana anda perlu mengeksport beberapa nilai. Sebagai contoh, anda mungkin mempunyai modul yang mengandungi beberapa fungsi utiliti yang perlu disediakan di pelbagai tempat dalam aplikasi anda. <p> jadi mari kita menghidupkan fail leftpad kami ke dalam modul, yang kemudiannya kita perlukan dalam fail kedua. <p> Dinamakan Eksport <St> <h4 > Untuk membuat eksport bernama, tambahkan yang berikut ke bahagian bawah fail leftpad: <p> kita juga boleh mengeluarkan "gunakan ketat"; Pengisytiharan dari bahagian atas fail, seperti modul yang dijalankan dalam mod ketat secara lalai. <pre ><span >npm init -y <p> DeFult Export <h4 > Oleh kerana hanya ada satu fungsi yang akan dieksport dalam fail leftpad, ia mungkin sebenarnya menjadi calon yang baik untuk menggunakan lalai eksport sebaliknya: <p> Sekali lagi, anda boleh mengeluarkan "gunakan ketat"; pengisytiharan dari bahagian atas fail. <pre ><span >npm install babel-cli babel-preset-env --save-dev <p> import <h3 > Untuk menggunakan modul yang dieksport, kita kini perlu mengimportnya ke dalam fail (modul) yang kami ingin gunakan. <p> Untuk pilihan lalai eksport, modul yang dieksport boleh diimport di bawah nama yang anda ingin pilih. Sebagai contoh, modul leftpad boleh diimport seperti: <p> atau ia boleh diimport sebagai nama lain, seperti SO: <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p> secara fungsional, kedua wujud dalam modul penerimaan. <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, <p> Untuk pilihan Eksport yang dinamakan, kami mesti mengimport modul menggunakan nama yang sama seperti yang dieksport di bawah. Untuk modul contoh kami, kami akan mengimportnya dengan cara yang sama dengan yang kami gunakan dengan sintaks lalai eksport, tetapi dalam kes ini, kami mesti membungkus nama yang diimport dengan pendakap keriting: <p> pendakap adalah wajib dengan eksport yang dinamakan, dan ia akan gagal jika mereka tidak digunakan. <pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} <p> Adalah mungkin untuk menukar nama eksport yang dinamakan pada import jika diperlukan, dan untuk berbuat demikian, kita perlu mengubah sintaks kita sedikit menggunakan sintaks [modul] sebagai [path]. Seperti eksport, terdapat pelbagai cara untuk melakukan ini, yang semuanya terperinci di halaman import MDN. <pre ><span >npm init -y <p> Sekali lagi, perubahan nama agak tidak masuk akal, tetapi ia menggambarkan titik bahawa mereka boleh ditukar kepada apa -apa. Anda harus mengekalkan amalan penamaan yang baik pada setiap masa, kecuali sudah tentu anda menulis rutin untuk menyediakan resipi berasaskan buah. <h3 > memakan modul yang dieksport <p> Untuk menggunakan modul leftpad yang dieksport, saya telah membuat fail index.js berikut dalam folder SRC/JS. Di sini, saya gelung melalui pelbagai nombor siri, dan awalan mereka dengan sifar untuk menjadikannya menjadi rentetan lapan aksara. Kemudian, kami akan menggunakannya dan menghantarnya ke elemen senarai yang diperintahkan pada halaman HTML. Perhatikan bahawa contoh ini menggunakan sintaks eksport lalai: <pre ><span >npm install babel-cli babel-preset-env --save-dev <p> seperti yang kita lakukan sebelum ini, jalankan skrip binaan dari direktori <goot>: <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p> Babel kini akan membuat fail index.js dalam direktori awam/JS. Seperti fail leftpad.js kami, anda harus melihat bahawa Babel telah menggantikan semua sintaks ES6 dan ditinggalkan hanya sintaks ES5. Anda juga mungkin mendapati bahawa ia telah menukarkan sintaks modul ES6 ke modul.export berasaskan nod, yang bermaksud kita boleh menjalankannya dari baris arahan: <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, <p> Terminal anda kini harus log keluar pelbagai rentetan yang diawali dengan sifar untuk menjadikannya lapan aksara panjang. Dengan itu, sudah tiba masanya untuk melihat Webpack. <h2 > memperkenalkan webpack dan mengintegrasikannya dengan Babel <p> Seperti yang disebutkan, modul ES6 membenarkan pemaju JavaScript untuk memecahkan kod mereka ke dalam ketulan yang boleh diurus, tetapi akibatnya adalah bahawa potongan -potongan itu harus disampaikan kepada penyemak imbas yang meminta, yang berpotensi menambah berpuluh -puluh permintaan HTTP tambahan kembali ke Server - Sesuatu yang kita patut cari untuk mengelakkan. Di sinilah webpack masuk. <p> Webpack adalah modul modul. Tujuan utamanya adalah untuk memproses permohonan anda dengan menjejaki semua kebergantungannya, kemudian bungkusannya ke dalam satu atau lebih berkas yang boleh dijalankan dalam penyemak imbas. Walau bagaimanapun, ia boleh jauh lebih daripada itu, bergantung kepada bagaimana ia dikonfigurasikan. <p> Konfigurasi Webpack didasarkan sekitar empat komponen utama: <ul> <li> titik kemasukan <li> Lokasi output <li> loaders <li> Plugin <p> entri: Ini memegang titik permulaan aplikasi anda dari mana webpack dapat mengenal pasti kebergantungannya. <p> output: Ini menentukan di mana anda ingin bundle yang diproses disimpan. <p> Loaders: Ini adalah cara untuk menukar satu perkara sebagai input dan menghasilkan sesuatu yang lain sebagai output. Mereka boleh digunakan untuk memperluaskan keupayaan Webpack untuk mengendalikan lebih daripada sekadar fail JavaScript, dan oleh itu menukarkannya ke modul yang sah juga. <p> Plugin: Ini digunakan untuk memperluaskan keupayaan Webpack ke dalam tugas -tugas lain di luar bundling - seperti minifikasi, linting dan pengoptimuman. <p> untuk memasang webpack, jalankan yang berikut dari direktori <goot> anda: <pre ><span >npm init -y <p> Ini memasang webpack secara tempatan ke projek, dan juga memberikan keupayaan untuk menjalankan webpack dari baris arahan melalui penambahan Webpack-CLI. Anda kini harus melihat Webpack yang disenaraikan dalam fail Package.json anda. Walaupun anda berada dalam fail itu, ubah bahagian skrip seperti berikut, sehingga kini tahu menggunakan Webpack dan bukan Babel secara langsung: <pre ><span >npm install babel-cli babel-preset-env --save-dev <p> Seperti yang anda lihat, skrip ini memanggil fail webpack.config.js, jadi mari buatnya dalam direktori <oot> kami dengan kandungan berikut: <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p> Ini lebih kurang fail konfigurasi paling mudah yang anda perlukan dengan webpack. Anda dapat melihat bahawa ia menggunakan entri <em> dan <em> output bahagian yang diterangkan sebelum ini (ia boleh berfungsi dengan ini sahaja), tetapi juga mengandungi mod: tetapan 'pembangunan'. Webpack mempunyai pilihan untuk menggunakan mod "pembangunan" atau "pengeluaran". Mod Penetapan: 'Pembangunan' mengoptimumkan untuk membina kelajuan dan debugging, sedangkan mod: 'Pengeluaran' mengoptimumkan kelajuan pelaksanaan pada saiz fail runtime dan output. Terdapat penjelasan yang baik tentang mod dalam artikel Tobias Koppers '"Webpack 4: Mode and Optimization" sekiranya anda ingin membaca lebih lanjut mengenai bagaimana mereka boleh dikonfigurasi di luar tetapan lalai. <A 🎜> <p> Seterusnya, keluarkan sebarang fail dari folder awam/JS. Kemudian rerun ini: <p> anda akan melihat bahawa ia kini mengandungi fail tunggal ./public/bundle.js. Buka fail baru, walaupun, dan kedua -dua fail yang kami mulakan dengan kelihatan agak berbeza. Ini adalah bahagian fail yang mengandungi kod index.js. Walaupun ia agak banyak diubahsuai dari asal kami, anda masih boleh memilih nama pembolehubahnya: <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, <p> Jika anda menjalankan nod awam/js/bundle.js dari folder <goot>, anda akan melihat anda mendapat hasil yang sama seperti yang telah kami lakukan sebelumnya. <pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} <p> transpiling <h3 > seperti yang disebutkan sebelumnya, loaders <p> membolehkan kita menukar satu perkara menjadi sesuatu yang lain. Dalam kes ini, kami mahu ES6 ditukar kepada ES5. Untuk melakukan itu, kami memerlukan beberapa pakej lagi: <em> Untuk menggunakannya, webpack.config.js memerlukan seksyen modul yang menambahnya selepas bahagian <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} output <p>, seperti: <em> Ini menggunakan pernyataan REGEX untuk mengenal pasti fail JavaScript yang akan dialihkan dengan Babel-Loader, sementara tidak termasuk apa-apa dalam folder Node_Modules dari itu. Akhir sekali, Babel-Loader diberitahu untuk menggunakan pakej Babel-Preset-ENV yang dipasang sebelum ini, untuk menubuhkan parameter transpil yang ditetapkan dalam fail .babelrc. <pre ><span >npm run build <p> dengan yang dilakukan, anda boleh mengulangi ini: <p> kemudian periksa awam/js/bundle.js baru dan anda akan melihat bahawa semua jejak sintaks ES6 telah hilang, tetapi ia masih menghasilkan output yang sama seperti sebelumnya. <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >var cache = ["", " ", " ", " ", " ", " ", " ", " ", " ", " "]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) return function () { cache<span >[len] + str; <span >}; <span >var pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch;else break; <span >} <span >return "" + pad + str; <span >} <p> membawanya ke penyemak imbas <h2 > Setelah membina webpack dan persediaan Babel yang berfungsi, sudah tiba masanya untuk membawa apa yang telah kami lakukan kepada penyemak imbas. Fail HTML kecil diperlukan, dan ini harus dibuat dalam folder <goot> seperti di bawah: <pre ><span >npm init -y <p> Tidak ada yang rumit di dalamnya. Titik utama yang perlu diperhatikan ialah elemen <ol> , di mana pelbagai nombor akan pergi, dan elemen <cript> </script> sebelum tag penutup

Atas ialah kandungan terperinci Menyediakan projek ES6 menggunakan Babel dan Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!