JavaScript Modular: Panduan Pemula untuk Systemjs & JSPM

Takeaways Key

Systemjs dan JSPM adalah alat yang boleh digunakan untuk mengatasi batasan modulariti JavaScript. Systemjs adalah pemuat modul yang boleh mengimport modul dalam format popular pada masa larian, manakala JSPM adalah pengurus pakej yang dibina di atas Systemjs. Bersama -sama, mereka menguruskan pakej dan kebergantungan mereka, yang membolehkan pemasangan dan pemuatan kebergantungan yang lebih mudah. ​​
Proses menubuhkan projek dengan JSPM dan SystemJS melibatkan membuat direktori, memulakan projek NPM, dan memasang JSPM secara tempatan. Setelah disediakan, JSPM dan Systemjs boleh digunakan untuk memasang dan mengurus pakej dari sumber yang berbeza, memindahkan kod ES6, dan mengendalikan kebergantungan.
JSPM juga berfungsi sebagai modul modul, menggabungkan semua fail dan perpustakaan dalam satu fail dan menukar sistem modul yang digunakan oleh fail ke modul gaya SystemJS. Proses ini bermanfaat untuk prestasi dan harus digunakan dalam aplikasi pengeluaran.

Artikel ini dikaji semula oleh Adrian Sandu dan Mark Brown. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

Sejak beberapa tahun kebelakangan ini, bahasa pengaturcaraan JavaScript telah meletup dalam populariti. Ia telah menjadi bahasa untuk membangunkan kedua-dua aplikasi web yang kaya, serta aplikasi mudah alih hibrid. Dan sebagai projek JavaScript menjadi semakin kompleks, pemaju mengalami keperluan baru bahasa. Salah satu daripada ini adalah modularity.

sejauh yang saya dapat lihat, terdapat dua aspek di mana modulariti harus dicapai:

modul yang kami pengarang
modul luaran yang dipasang sebagai dependensi

ES6 membawa sintaks modul standard ke JavaScript dan spesifikasi loader. Ini adalah langkah yang baik ke hadapan, namun pada masa penulisan, tidak ada pelayar yang dapat memuat modul ES6 secara asli. Ini bermakna jika anda mahu menggunakan modul hari ini, anda perlu menggunakan modul modul.

Untuk gambaran keseluruhan landskap semasa lihat: Memahami Modul JavaScript: Bundling & Transpiling

Dan apa lagi, kami tidak mempunyai pengurus pakej yang membolehkan kami memuat turun pakej dan memasukkannya ke dalam aplikasi kami. Pengurus pakej (seperti Bower dan NPM) membantu kami memuat turun kebergantungan depan tanpa perlu melawat laman web projek, tetapi itu sejauh mana.

Dalam artikel ini, kita akan melihat bagaimana JSPM dan Systemjs dapat digunakan untuk mengatasi masalah ini.

Apakah jspm dan systemjs?

Pengurus Pakej JavaScript (alias JSPM) adalah pengurus pakej yang berfungsi di atas loader Modul Sistemjs Universal. Ia bukan pengurus pakej yang sama sekali baru dengan set peraturannya sendiri, sebaliknya ia berfungsi di atas sumber pakej yang sedia ada. Di luar kotak, ia berfungsi dengan GitHub dan NPM. Oleh kerana kebanyakan pakej berasaskan Bower didasarkan pada GitHub, kami boleh memasang pakej tersebut menggunakan JSPM juga. Ia mempunyai pendaftaran yang menyenaraikan kebanyakan pakej depan yang biasa digunakan untuk pemasangan yang lebih mudah. Seperti NPM, ia boleh digunakan untuk membezakan pakej sebagai pakej pembangunan dan pengeluaran semasa pemasangan.

Systemjs adalah loader modul yang boleh mengimport modul pada masa larian dalam mana -mana format popular yang digunakan hari ini (Commonjs, UMD, AMD, ES6). Ia dibina di atas polyfill loader modul ES6 dan cukup pintar untuk mengesan format yang digunakan dan mengendalikannya dengan sewajarnya. Systemjs juga boleh memindahkan kod ES6 (dengan Babel atau Traceur) atau bahasa lain seperti TypeScript dan Coffeescript menggunakan plugin. Anda mengkonfigurasi perkara -perkara ini dalam System.Config ({...}) sebelum mengimport modul anda.

JSPM menggunakan Systemjs untuk menguruskan pakej dan kebergantungan mereka, jadi kita tidak perlu bimbang untuk meletakkan pakej dalam perintah yang betul untuk memuatkannya.

Sekarang kita tahu apa jspm dan systemjs, mari kita lihat cara menggunakannya.

menyediakan persekitaran kita

Jika anda belum melakukannya, anda perlu memasang Node.js. Cara yang sangat mudah untuk melakukan ini ialah menggunakan pengurus versi (seperti NVM) dan terperinci dalam hujung cepat ini. Sebaik sahaja anda bangun dan berjalan dengan nod, anda boleh memasang JSPM secara global dengan menjalankan perkara berikut dari baris arahan:

<span>npm install -g jspm
</span>

Sekarang kita boleh menggunakan antara muka baris perintah JSPM. Mari buat projek:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Ini mewujudkan direktori bernama New-Project, memulakan projek NPM dan memasang JSPM secara tempatan. Ini adalah cara yang disyorkan untuk melakukan sesuatu, kerana ia mengunci versi JSPM untuk projek dan memastikan peningkatan kepada JSPM global tidak akan mengubah tingkah laku aplikasi anda.

Satu lagi kelebihan pendekatan ini ialah jika projek anda digunakan melalui membina integrasi yang berterusan, anda boleh mengkonfigurasi proses membina untuk menggunakan pakej JSPM tempatan dan bukannya perlu memasang JSPM secara global pada pelayan juga.

anda boleh menggunakan jspm -v untuk mengesahkan versi tempatan.

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

untuk menggunakan JSPM dalam projek, jalankan arahan berikut:

jspm init

Anda akan diminta untuk beberapa tetapan, tekan Enter untuk menerima nilai lalai atau taipkan nilai yang berbeza untuk mengubahnya. Tangkapan skrin berikut menunjukkan contoh apabila arahan dilaksanakan dengan tetapan lalai:

Struktur dan Konfigurasi Direktori

Ini mencipta fail bernama config.js dalam akar projek, serta folder bernama JSPM_Packages. Jika anda mengintip di dalam folder JSPM_Packages, anda akan melihat:

• Sub-direktori github
• Sub-direktori NPM
• fail utama untuk loader modul sistemjs

Sebab JSPM membuat direktori GitHub dan NPM adalah bahawa ia piggybacks di atas pendaftaran ini, hanya aliasing npm atau pakej github yang diminta. Di samping itu, direktori GitHub mengandungi plugin Systemjs untuk memuatkan fail JSON dari GitHub dan direktori NPM mengandungi pakej yang berkaitan dengan Babel yang kita perlukan untuk memindahkan kod ES6 kami

fail config.js terutamanya untuk Systemjs. Jika anda membukanya, anda akan melihat bahawa ia mempunyai pilihan konfigurasi yang ditetapkan untuk laluan pakej dari sumber yang berbeza, pilihan untuk Babel dan nama peta untuk pakej untuk memudahkan untuk merujuknya. Fail ini dikemas kini secara automatik dikemas kini apabila pakej baru dipasang menggunakan JSPM.

Perintah juga mengemas kini fail Package.json dan menambah seksyen untuk JSPM. Pakej Babel yang dipasang dengan perintah init ditambah ke bahagian DevDependencies projek.

<span>npm install -g jspm
</span>

Mana -mana pakej baru yang dipasang menggunakan perintah JSPM dengan atau tanpa pilihan -Save akan ditambah ke bahagian THEDECTENCIES dan oleh itu ia menjadi kebergantungan pengeluaran. Memasang dengan pilihan--Save-Dev menjadikan kebergantungan sebagai kebergantungan masa pembangunan dan menyelamatkannya ke bahagian DevDependency.

Akhirnya, JSPM menambah entri ke bahagian peta fail Config.js untuk setiap pakej yang dipasang menggunakan arahan JSPM. Nama yang dipetakan boleh digunakan untuk memuatkan perpustakaan dalam mana -mana fail JavaScript sepanjang projek anda. Sebarang kebergantungan pakej ditambah ke bahagian peta juga. Berikut adalah serpihan dari bahagian peta fail config.js yang menunjukkan bagaimana pakej jQuery dan jQuery-UI dipetakan dan bagaimana pergantungan ditakrifkan:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

sebagai titik minat, anda juga boleh menjana pemetaan ini secara automatik apabila anda memasang modul:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

ini akan membolehkan anda menulis perkara berikut di tempat lain di aplikasi anda:

jspm init

jspm dan systemjs dalam tindakan

Untuk menemani artikel ini, saya telah membuat sampel carian Wikipedia yang mudah. Anda boleh mencari repo GitHub di sini. Ia adalah persediaan menggunakan pilihan lalai perintah JSPM Init dan akibatnya ia menggunakan Babel sebagai Transpiler ES6. Ia juga menggunakan JQuery dan bootstrap perpustakaan yang dipasang menggunakan JSPM. Sebagai bootstrap memerlukan jQuery, JSPM mencipta pemetaan dalam fail config.js untuk memuatkan jQuery sebelum memuat bootstrap:

<span>npm install -g jspm
</span>

sebagai nama repo mencadangkan, ia menanyakan API Carian Wikipedia dan memaparkan data yang diterima dalam pandangan. Ia menggunakan JQuery's $ .ajax () untuk membuat panggilan ke API, memaparkan hasil pada halaman dan mempunyai pautan untuk menunjukkan coretan artikel dalam pop timbul modal. Sampel mempunyai tiga fail JavaScript di bawah folder skrip:

• Search.js: Fail ini menggunakan modul gaya AMD. Ia sebagai beban jQuery sebagai kebergantungan dan membuat panggilan Ajax ke API Carian Wikipedia. Modul ini mengembalikan fungsi yang boleh dipanggil modul lain dengan parameter.
• summarymodal.js: Fail ini menggunakan modul gaya ES6. Ia memuat perpustakaan JavaScript Bootstrap. Ia kemudiannya mengeksport fungsi yang menerima sekeping HTML yang melarikan diri dan tidak mengesan teks HTML sebelum memaparkannya dalam pop timbul.
• display.js: Fail ini menggunakan modul gaya Commonjs. Ia memuatkan jQuery dan kedua -dua fail di atas sebagai kebergantungan. Ia memanggil kaedah yang terdedah oleh carian.js untuk mendapatkan hasil dan kemudian membuat data ini dalam jadual HTML pada UI. Di samping itu, ia menggunakan kaedah yang terdedah oleh SummaryModal.js untuk menunjukkan modal pada klik butang pautan di atas meja.

Seperti yang telah disebutkan, Systemjs memahami semua sistem modul dalam JavaScript. Kami boleh memuatkan ketiga -tiga fail di atas menggunakan Systemjs.

Untuk membuat skrip ini dijalankan, kita perlu memuat sistem.js dan config.js pada halaman HTML. Selepas itu kami akan memuatkan fail paparan.js menggunakan loader modul Systemjs. Oleh kerana fail ini merujuk kepada fail lain dalam repo dan fail -fail ini memuatkan perpustakaan yang diperlukan, kami tidak perlu memuatkan fail lain.

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Systemjs memindahkan fail ES6 dengan cepat menggunakan Babel dan menjalankannya dalam penyemak imbas. Berikut adalah demo (sedikit dipermudahkan) tentang apa yang kelihatan seperti ini: Walau bagaimanapun, transpiling dengan cepat adalah buruk untuk prestasi dan tidak boleh digunakan dalam aplikasi pengeluaran. Jangan lupa bahawa JSPM adalah modul modul, jadi mari kita bundle.

bundling

kita boleh membuat satu bundle untuk keseluruhan aplikasi menggunakan arahan berikut:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Perintah ini melakukan yang berikut:

menggabungkan semua fail dan perpustakaan dalam satu fail bernama binaan.js
Menukar sistem modul yang digunakan oleh fail ke modul gaya Systemjs
mencipta fail peta sumber yang dimuatkan semasa debugging

Sekarang kita perlu memuatkan fail Build.js ke dalam fail index.html. Berikut adalah set rujukan yang dikemas kini:

jspm init

Sila ambil perhatian bahawa kami tidak mengeluarkan pernyataan import untuk memuatkan paparan modul.js. Kenyataan ini tidak memuatkan fail lagi, sebaliknya ia memuat modul Systemjs yang sudah tersedia dalam fail Build.js.

Anda boleh mengikuti arahan dalam fail ReadMe projek untuk menjalankannya. Anda boleh melayari kod dalam fail individu dalam alat pemaju dan debug melalui mereka.

Kesimpulan

Gabungan JSPM dan SystemJS menyediakan cara bersatu untuk memasang dan memuatkan kebergantungan. Alat ini bukan sahaja menjadikan tugas menguruskan kebergantungan lebih mudah tetapi juga membuka pintu untuk menggunakan sistem modul masa depan pada penyemak imbas hari ini. Seperti yang telah saya tunjukkan, JSPM mudah untuk persediaan dan penggunaan, dua sebab yang menyumbang kepada populariti yang semakin meningkat.

Adakah anda menggunakan JSPM dalam projek anda? Kenapa? Mengapa tidak? Beritahu saya dalam komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Modular JavaScript, Systemjs, dan JSPM

Apakah perbezaan utama antara Systemjs dan Webpack?

Systemjs dan Webpack adalah kedua -dua modul modul, tetapi mereka mempunyai beberapa perbezaan utama. Systemjs adalah pemuat modul dinamik sejagat yang memuat modul ES6, AMD, CommonJS, dan skrip global dalam penyemak imbas dan NodeJS. Ia lebih daripada pemuat modul daripada bundler. Sebaliknya, Webpack adalah modul modul statik untuk aplikasi JavaScript moden. Ia membina graf ketergantungan yang merangkumi setiap modul keperluan aplikasi anda dan membungkusnya ke dalam satu atau lebih berkas.

Bagaimana saya boleh memasang Systemjs? Anda boleh menggunakan arahan berikut untuk memasangnya: NPM Pasang Systemjs. Selepas pemasangan, anda boleh mengimportnya ke dalam projek anda menggunakan import {System} dari 'Systemjs'. Pengurus Pakej untuk Systemjs. Ia memudahkan proses memasang dan menguruskan pakej. Ia juga menyediakan cara bersatu untuk memasang pakej dari NPM, GitHub, dan sumber lain. JSPM juga boleh mengendalikan transpilation, membolehkan anda menulis kod dalam ES6 atau TypeScript dan memilikinya secara automatik ke ES5. anda boleh menggunakan kaedah System.Import (). Kaedah ini mengembalikan janji yang menyelesaikan modul. Berikut adalah contoh: System.import ('Path/to/Module.js'). Kemudian (fungsi (modul) {/ * menggunakan modul */}).

Ya, Systemjs boleh digunakan dengan Node.js. Ia menyediakan loader modul sejagat yang berfungsi dalam penyemak imbas dan node.js. Ini membolehkan anda menulis kod yang boleh dikongsi antara klien dan pelayan.

Bagaimana sistemJS mengendalikan kebergantungan? Anda boleh menentukan laluan dan kebergantungan modul anda dalam konfigurasi SystemJS. Apabila modul dimuatkan, Systemjs akan memuatkan kebergantungannya secara automatik.

Apakah faedah menggunakan JavaScript modular?

Modular JavaScript menyediakan beberapa faedah. Ia menjadikan kod anda lebih teratur dan lebih mudah untuk dikendalikan. Ia membolehkan anda menggunakan semula kod di bahagian -bahagian yang berlainan aplikasi anda. Ia juga memudahkan untuk menguji kod anda, kerana setiap modul boleh diuji secara bebas. Kaedah ini menerima objek yang menentukan pilihan konfigurasi. Beberapa pilihan yang boleh anda konfigurasikan termasuk laluan, peta, pakej, dan transpiler. Angular, React, dan Vue.js. Ia menyediakan loader modul sejagat yang boleh memuatkan modul dari mana -mana rangka kerja ini. Ia adalah bahagian utama ekosistem JavaScript, terutamanya untuk projek yang memerlukan pemuat modul sejagat. Dengan perkembangan teknologi JavaScript dan Web yang berterusan, SystemJS mungkin terus berkembang untuk memenuhi keperluan pemaju.

Atas ialah kandungan terperinci JavaScript Modular: Panduan Pemula untuk Systemjs & JSPM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!