Rrule: Comment charger la règle ?

Créé le 3 juin 2019  ·  11Commentaires  ·  Source: jakubroztocil/rrule

C'est une question vraiment basique mais je n'ai vu personne la poser dans les problèmes fermés, donc je vais essayer - comment ajouter rrule.js au navigateur ? J'ai essayé de l'ajouter dans codepen, mais je n'arrive pas à le faire fonctionner malgré les nombreuses tentatives différentes d'exiger / d'importer des modules.

A savoir, je continue de voir cette erreur dans la console
image

J'ai même essayé de le charger dans observable, mais je n'arrivais pas à le faire fonctionner non plus. Toute aide est la bienvenue, merci :)

Commentaire le plus utile

Hmm, donc je n'ai jamais eu l'occasion d'importer un module ES6 directement dans le navigateur moi-même (bien qu'il puisse s'agir d'un module UMD), mais il semble que le code suivant fonctionne sur 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())

Tous les 11 commentaires

Il existe de nombreuses façons d'utiliser rrule dans le navigateur. Si vous voulez juste jouer / tester la règle dans votre navigateur, vous pouvez utiliser quelque chose comme stackblitz qui vous permettra d'importer le module depuis npm.

Vous rencontrez des problèmes parce que vous essayez d'importer un chemin de fichier relatif ("rrule") à partir des serveurs de codepen (et, bien que je n'aie jamais utilisé codepen, je doute que codepen ait mis rrule disposition de ce sont les utilisateurs en quelque sorte). Vous devrez importer le javascript depuis un CDN si vous ne comptez pas le servir vous-même.

Salut @thefliik , merci beaucoup pour ton commentaire :)

stackblitz a l'air incroyable. Codepen ressemble beaucoup à stackblitz en ce sens que c'est un terrain de jeu pour créer des pages Web et vous permet de charger des scripts à partir de différents CDN. J'avais chargé mon script via la boîte de dialogue settings codepen > Javascript > puis en entrant le chemin d'accès à mon script hébergé.

image

J'héberge actuellement rrule à https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js .

Voici le stylo mis à jour où je charge explicitement rrrule via un

importer { RRule, RRuleSet, rrulestr } depuis " https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js/ "

Ce code, que je vois que vous avez essayé, est une syntaxe ES6 correcte (bien qu'il semble qu'il manque une virgule à votre code). On dirait que S3 bloque la tentative d'accès (si vous regardez la console, elle répond avec un code d'état interdit 403).

Voici un projet simple qui a importé une règle : https://stackblitz.com/edit/js-bbaffe

Tellement étrange, S3 charge définitivement la ressource dans ma console
image

Pour autant que je sache, il n'y a pas d'autres dépendances que je dois charger, n'est-ce pas (j'ai essayé d'ajouter du texte dactylographié mais cela ne semblait pas avoir d'importance) ?

Si j'avais un environnement npm, je copierais ce joli projet stackblitz que vous avez fourni, mais malheureusement, je suis limité au code côté client uniquement :/

Selon Google , l'extension de fichier peut avoir de l'importance sur les modules.

Une note sur les extensions de fichiers
Vous avez peut-être remarqué que nous utilisons l'extension de fichier .mjs pour les modules. Sur le Web, l'extension de fichier n'a pas vraiment d'importance, tant que le fichier est servi avec le type JavaScript MIME text/javascript . Le navigateur sait qu'il s'agit d'un module à cause de l'attribut type sur l'élément de script.

Il semble que mes fichiers ne soient pas servis en tant que text/javascript mais plutôt en tant que application/javascript ou application/x-javascript . Est-ce que cela pourrait être le problème? Quelqu'un ici a-t-il une version hébergée de rrule qui le fournit avec le type MIME text/javascript ?

Hmm, donc je n'ai jamais eu l'occasion d'importer un module ES6 directement dans le navigateur moi-même (bien qu'il puisse s'agir d'un module UMD), mais il semble que le code suivant fonctionne sur 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())

Tellement étrange, S3 charge définitivement la ressource dans ma console

Peut-être êtes-vous connecté à votre compte amazon sur votre ordinateur

C'est un peu ce que je pensais mais non, je peux accéder à ce fichier depuis le mode incognito et un deuxième ordinateur qui n'y a pas accès. Comme on le voit ici, j'ai même essayé de charger le script à partir de jsdeliver sans

@zeluspudding tu n'as pas vu mon commentaire précédent ?

import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js" fonctionne pour moi sur codepen.

Oh, je suis désolé - j'ai raté votre commentaire. Et oui! Ça marche :)

Merci beaucoup ! J'apprécie vraiment toute l'aide.

Je suggérerais peut-être une mise à jour du guide de démarrage avec votre extrait de code (pour ce cas d'importation directe d'un module ES6 dans le navigateur). Je peux soumettre une pull request si vous le souhaitez

Pour toute personne intéressée à jouer avec rrule in observable, visitez ce lien .

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

agordeev picture agordeev  ·  16Commentaires

fatshotty picture fatshotty  ·  5Commentaires

berardo picture berardo  ·  9Commentaires

kirrg001 picture kirrg001  ·  5Commentaires

espen picture espen  ·  10Commentaires