JavaScript Modern: tampilan samping

Hari ini saya mencoba membantu seorang teman menggunakan modul JS yang ia temukan di Github. Teman saya adalah ilmuwan yang sangat baik, tetapi bukan spesialis JS Karena saya telah melakukan penelitian dan pengajaran kegunaan di Massachusetts Institute of Technology selama enam tahun terakhir, kulit saya menjadi beku karena betapa bingungnya segalanya. Banyak pengecualian yang tidak perlu, kesalahan misterius dan kurangnya umpan balik yang tepat. Dan bagi saya sepertinya saya tidak banyak membantunya untuk bertahan dari kekecewaan yang dia alami selama sekitar jam siksaan ini, sampai dia menyerah.

Itu seperti ini ...

Catatan: nama paket dan orang telah diubah untuk melindungi identitas mereka. Saya juga menghilangkan beberapa masalah yang terlalu spesifik untuk paket ini. Beberapa kesalahan dipulihkan dari memori, jadi beri tahu saya jika saya salah mengerti sesuatu.

John : Hai, saya ingin mencoba algoritme ini yang saya temukan di Github. Dia mengatakan apa yang perlu digunakan import functionName packageName, dan kemudian dipanggil functionName(). Segalanya tampak sangat sederhana! Saya tidak benar-benar membutuhkan antarmuka pengguna, jadi saya akan menggunakan Node!

Saya (Leah): Tentu saja, Node sepertinya kerangka kerja yang bagus!

John meluncurkan npm install packageName --saveseperti yang direkomendasikan oleh README. Lalu node index.js.

Node:

Peringatan: Untuk memuat modul ES, set "ketik": "modul" di package.json atau gunakan ekstensi .mjs.
SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul

John: Tapi saya tidak punya paket.json ...

Leah: Jalankan npm init, itu akan menghasilkan itu!

John memulai npm init, melewati panduan instalasi, secara manual menambahkannya type: "module"ke package.json yang dihasilkan.

John meluncurkan node index.js.

Node:

SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul

Anehnya, kali ini modul internal proyek melemparkan kesalahan. WAT ?!

Leah: Ya ampun, jalankan saja di browser, ini adalah modul ES6, hanya ada algoritma JS bersih yang tidak menggunakan Node API, itu seharusnya bekerja.

John membuat halaman index.html sederhana dengan sebuah baris <script type="module" src="index.js">dan memuatnya di browser.

Tidak ada di konsol. TA-dah.

Lea: Ya, Anda harus mengkonfigurasi jalur modul untuk mengimpor packageName. Node melakukan hal-hal khusus untuk diselesaikan node_modules, jadi di browser Anda harus menentukan jalur eksplisit sendiri.

John sedang melihat file-nya, tetapi tidak ada direktori node_modules di sana.

Lea: Ya, Anda memulainya npm installsebelum muncul package.json, mungkin ini intinya! Coba lagi!

John memulai John lagi npm install packageName --save

: Oh, sekarang direktori node_modules telah muncul!

John mati-matian mencari titik masuk di node_modules. Kemudian mengedit index.js yang sesuai dan memuatnya kembali.

Firefox:

Jenis MIME salah: teks / html

Lea: Tentu saja, itu terbuka untukmu file://! Teman saya, bagaimana Anda hidup di zaman kita tanpa localhost? Saat ini, penggunaan Javascript untuk file://sangat terbatas.

John: Tapi mengapa saya ... Oke, saya akan menjalankan localhost.

John menjalankan localhost, membuka index.html di localhost : 80.

Firefox:

Jenis MIME salah: teks / html

John (menghela nafas) . Perlu mengkonfigurasi localhost untuk mengeluarkan file JS dengan tipe teks / javascript?

Lea: Apa? Tidak! Dia tahu itu. Hmm ... Lihat pada tab Networks. Saya menduga bahwa dia tidak dapat menemukan modul Anda, jadi dia mengembalikan halaman 404 HTML, dan kemudian mengeluh bahwa halaman ini tidak text/javascript.

Melihat node_modules lagi, mengoreksi jalannya. Ternyata VS Code menciutkan direktori hanya dengan satu subdirektori, jadi kami tidak memperhatikan hal ini.

Sebenarnya, saya pikir ini adalah peningkatan kegunaan yang benar-benar baik atas nama VS Code, ini meningkatkan efisiensi, tetapi mereka seharusnya membuat segalanya lebih terlihat.

Firefox:

SyntaxError: missing) setelah parameter formal

Lea: Apa? Ini dari paket source, ini bukan salahmu. Saya tidak mengerti ... Bisakah saya melihat baris ini?

John mengklik saluran yang menyebabkan kesalahan

Lea: Ya Tuhan. Ini bukan Javascript, ini adalah Typcript !!! Dengan ekstensi .js !!!

John: Ya, saya hanya ingin menjalankan satu baris kode untuk menguji algoritma ini ...

John menyerah. Dia menyimpulkan bahwa yang terbaik adalah tidak pernah menyentuh modul Node, npm atau ES6.

Tamat.

Harap dicatat bahwa John adalah seorang ilmuwan komputer yang tahu banyak tentang web: ia sudah menginstal Node & npm, ia tahu apa tipe MIME, ia bisa memulai localhost ketika dibutuhkan. Apa yang bisa diharapkan oleh pemula?

All Articles