Ini adalah pertanyaan yang sangat mendasar tetapi saya tidak melihat ada yang menanyakannya dalam masalah tertutup jadi saya akan mencoba - bagaimana Anda menambahkan rrule.js
ke browser? Saya sudah mencoba menambahkannya di codepen tetapi
Yaitu saya terus melihat kesalahan ini di konsol
Saya bahkan mencoba memuatnya di observable tetapi sepertinya tidak bisa membuatnya berfungsi juga. Setiap bantuan dipersilahkan, terima kasih :)
Ada banyak cara untuk menggunakan rrule di browser. Jika Anda hanya ingin bermain-main / menguji aturan di browser Anda, Anda dapat menggunakan sesuatu seperti stackblitz yang memungkinkan Anda mengimpor modul dari npm.
Anda mengalami masalah karena Anda mencoba mengimpor jalur file relatif ("rrule") dari server codepen (dan, meskipun saya tidak pernah menggunakan codepen, saya ragu codepen telah membuat rrule
tersedia untuk itu pengguna dalam beberapa cara). Anda perlu mengimpor javascript dari CDN jika Anda tidak akan menyajikannya sendiri.
Hai @thefliik , terima kasih banyak atas komentar Anda :)
stackblitz terlihat luar biasa. Codepen sangat mirip dengan stackblitz karena merupakan taman bermain untuk membangun halaman web dan memungkinkan Anda memuat skrip dari CDN yang berbeda. Saya telah memuat skrip saya melalui dialog settings
codepen > Javascript
> lalu memasukkan jalur file ke skrip yang dihosting.
Saat ini saya menghosting rrule di https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js
.
Inilah pena yang diperbarui tempat saya memuat rrrule secara eksplisit melalui a
impor { RRule, RRuleSet, rrulestr } dari " https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js/ "
Kode itu, yang saya lihat Anda coba, adalah sintaksis ES6 yang benar (meskipun sepertinya kode Anda mungkin kehilangan koma). Sepertinya S3 memblokir upaya akses (jika Anda melihat konsol, itu merespons dengan kode status terlarang 403).
Inilah proyek sederhana yang telah mengimpor rrule: https://stackblitz.com/edit/js-bbaffe
Sangat aneh, S3 pasti memuat sumber daya di konsol saya
Sejauh yang saya mengerti tidak ada dependensi lain yang perlu saya muat, kan (saya mencoba menambahkan TypeScript tapi sepertinya tidak masalah)?
Seandainya saya berada di lingkungan npm, saya akan menyalin proyek stackblitz indah yang Anda berikan, tetapi sayangnya saya terbatas pada kode sisi klien saja: /
Menurut Google , ekstensi file dapat berpengaruh pada modul.
Catatan tentang ekstensi file
Anda mungkin memperhatikan bahwa kami menggunakan ekstensi file.mjs
untuk modul. Di Web, ekstensi file tidak terlalu penting, selama file disajikan dengan jenis JavaScript MIMEtext/javascript
. Browser mengetahui bahwa ini adalah modul karena atribut type pada elemen skrip.
Sepertinya file saya tidak disajikan sebagai text/javascript
melainkan sebagai application/javascript
atau application/x-javascript
. Mungkinkah itu masalahnya? Adakah di sini yang memiliki versi rrule yang dihosting yang mengirimkannya dengan tipe MIME text/javascript
?
Hmm, jadi saya sendiri tidak pernah memiliki alasan untuk mengimpor modul ES6 ke browser secara langsung (meskipun ini mungkin modul UMD), tetapi sepertinya kode berikut berfungsi pada codepen:
// This imports everything in the `rrule` namespace
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"
console.log(rrule)
// Create a rule:
const rule = new rrule.RRule({
freq: rrule.RRule.WEEKLY,
interval: 5,
byweekday: [rrule.RRule.MO, rrule.RRule.FR],
dtstart: new Date(Date.UTC(2012, 1, 1, 10, 30)),
until: new Date(Date.UTC(2012, 12, 31))
})
// Get all occurrence dates (Date instances):
console.log(rule.all())
Sangat aneh, S3 pasti memuat sumber daya di konsol saya
Mungkin Anda masuk ke akun amazon di komputer Anda
Itulah yang saya pikirkan tetapi tidak, saya dapat mengakses file itu dari mode penyamaran dan komputer kedua yang tidak memiliki akses. Seperti yang terlihat di sini, saya bahkan mencoba memuat skrip dari jsdeliver tanpa hasil.
@zeluspudding apakah Anda tidak melihat komentar saya sebelumnya?
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"
bekerja untuk saya di codepen.
Oh, saya minta maaf - saya melewatkan komentar Anda. Dan ya! Itu berhasil :)
Terima kasih banyak! Saya sangat menghargai semua bantuan.
Saya mungkin menyarankan pembaruan untuk panduan memulai dengan cuplikan kode Anda (untuk kasus ini mengimpor modul ES6 ke browser secara langsung). Saya dapat mengirimkan permintaan tarik jika Anda suka
Bagi siapa pun yang tertarik bermain dengan rrule in observable, kunjungi tautan ini .
Komentar yang paling membantu
Hmm, jadi saya sendiri tidak pernah memiliki alasan untuk mengimpor modul ES6 ke browser secara langsung (meskipun ini mungkin modul UMD), tetapi sepertinya kode berikut berfungsi pada codepen: