هذا سؤال أساسي حقًا ولكن لم أجد أي شخص يسأله في القضايا المغلقة لذا سأحاول - كيف تضيف rrule.js
إلى المتصفح؟ لقد حاولت إضافته في codepen ولكن لا يمكنني تشغيله على الرغم من تجربة العديد من الطرق المختلفة لطلب / استيراد الوحدات.
أي ما زلت أرى هذا الخطأ في وحدة التحكم
حتى أنني حاولت تحميله بشكل يمكن ملاحظته ولكن يبدو أنني لم أستطع الحصول على هذا العمل أيضًا. نرحب بأي مساعدة ، شكرا :)
هناك طرق عديدة لاستخدام القاعدة في المتصفح. إذا كنت ترغب فقط في تشغيل / اختبار القاعدة في متصفحك ، فيمكنك استخدام شيء مثل stackblitz والذي سيسمح لك باستيراد الوحدة من npm.
أنت تواجه مشكلات لأنك تحاول استيراد مسار ملف نسبي ("القاعدة") من خوادم codepen (وعلى الرغم من أنني لم أستخدم برنامج codepen مطلقًا ، فأنا أشك في أن codepen قد أتاح rrule
لـ المستخدمين بطريقة ما). ستحتاج إلى استيراد javascript من CDN إذا كنت لن تخدمها بنفسك.
مرحبًا thefliik ، شكرًا جزيلاً لك على تعليقك :)
ستدبلتز تبدو لا تصدق. يشبه Codepen إلى حد كبير stackblitz من حيث أنه ملعب لبناء صفحات الويب ويتيح لك تحميل البرامج النصية من شبكات CDN مختلفة. لقد قمت بتحميل البرنامج النصي الخاص بي من خلال settings
الحوار> Javascript
> ثم إدخال مسار الملف إلى البرنامج النصي المستضاف الخاص بي.
أستضيف حاليًا القاعدة على https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js
.
استيراد {RRule، RRuleSet، rrulestr} من " https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js/ "
هذا الرمز ، الذي أراه أنك جربته ، هو بناء جملة ES6 الصحيح (على الرغم من أنه يبدو أن شفرتك قد تفتقد إلى فاصلة). يبدو أن S3 يحظر محاولة الوصول (إذا نظرت إلى وحدة التحكم ، فإنها تستجيب برمز الحالة المحظور 403).
إليك مشروع بسيط يحتوي على قاعدة مستوردة: https://stackblitz.com/edit/js-bbaffe
غريب جدًا ، S3 يقوم بالتأكيد بتحميل المورد في وحدة التحكم الخاصة بي
بقدر ما أفهم أنه لا توجد تبعيات أخرى أحتاج إلى تحميلها ، أليس كذلك (حاولت إضافة الكتابة المطبوعة ولكن لا يبدو أن هذا مهم)؟
لو كان لدي بيئة npm ، كنت سأنسخ مشروع stackblitz الجميل الذي قدمته ولكن لسوء الحظ أنا مقيد برمز جانب العميل فقط: /
وفقًا لـ Google ، يمكن أن يكون امتداد الملف مهمًا للوحدات النمطية.
ملاحظة حول امتدادات الملفات
ربما لاحظت أننا نستخدم امتداد الملف.mjs
للوحدات النمطية. على الويب ، لا يهم امتداد الملف حقًا ، طالما يتم تقديم الملف باستخدام JavaScript MIME من النوعtext/javascript
. يعرف المستعرض أنها وحدة نمطية بسبب سمة النوع الموجودة في عنصر البرنامج النصي.
يبدو أن ملفاتي لا يتم تقديمها على أنها text/javascript
بل بالأحرى application/javascript
أو application/x-javascript
. هل يمكن أن تكون هذه هي المشكلة؟ أي شخص هنا لديه نسخة مستضافة من القاعدة توفرها باستخدام نوع MIME text/javascript
؟
حسنًا ، لم يكن لدي أبدًا سبب لاستيراد وحدة ES6 إلى المتصفح بنفسي مباشرةً (على الرغم من أن هذا قد يكون وحدة UMD) ، ولكن يبدو أن الكود التالي يعمل على 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())
غريب جدًا ، S3 يقوم بالتأكيد بتحميل المورد في وحدة التحكم الخاصة بي
ربما قمت بتسجيل الدخول إلى حساب أمازون الخاص بك على جهاز الكمبيوتر الخاص بك
كان هذا نوعًا مما كنت أفكر فيه ولكن لا ، يمكنني الوصول إلى هذا الملف من وضع التصفح المتخفي وجهاز كمبيوتر آخر لا يمكنه الوصول إليه. كما رأينا هنا ، لقد حاولت حتى تحميل البرنامج النصي من jsdeliver دون حظ.
zeluspudding ألم تشاهد تعليقي السابق؟
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"
يعمل معي على codepen.
أوه ، أنا آسف - لقد فاتني تعليقك. ونعم! انها تقوم بالعمل :)
شكرا جزيلا لك! أنا حقا أقدر كل المساعدة.
أقترح ربما تحديثًا لدليل البدء باستخدام مقتطف الشفرة الخاص بك (في حالة استيراد وحدة ES6 إلى المتصفح مباشرةً). يمكنني تقديم طلب سحب إذا أردت
لأي شخص مهتم باللعب مع قاعدة يمكن ملاحظتها ، قم بزيارة هذا الرابط .
التعليق الأكثر فائدة
حسنًا ، لم يكن لدي أبدًا سبب لاستيراد وحدة ES6 إلى المتصفح بنفسي مباشرةً (على الرغم من أن هذا قد يكون وحدة UMD) ، ولكن يبدو أن الكود التالي يعمل على codepen: