Esta é uma pergunta realmente básica, mas eu não vi ninguém fazendo isso nas edições fechadas, então vou tentar - como você adiciona rrule.js
ao navegador? Eu tentei adicioná-lo no codepen, mas simplesmente não consigo fazê-lo funcionar, apesar de tentar muitas maneiras diferentes de exigir / importar módulos.
Ou seja, continuo vendo este erro no console
Eu até tentei carregá-lo em observável, mas também não conseguia fazer isso funcionar. Qualquer ajuda é bem vinda, obrigado :)
Existem muitas maneiras de usar o rrule no navegador. Se você quiser apenas brincar com a regra de teste / no seu navegador, você pode usar algo como stackblitz, que permite importar o módulo do npm.
Você está tendo problemas porque está tentando importar um caminho de arquivo relativo ("rrule") dos servidores do codepen (e, embora eu nunca tenha usado o codepen, duvido que o codepen tenha disponibilizado rrule
para são usuários de alguma forma). Você precisaria importar o javascript de um CDN se não for servi-lo sozinho.
Ei @thefliik , muito obrigado pelo seu comentário :)
stackblitz parece incrível. Codepen é muito parecido com o stackblitz no sentido de que é um playground para a construção de páginas da web e permite que você carregue scripts de diferentes CDNs. Eu carreguei meu script por meio do settings
dialog> Javascript
> do codepen e, em seguida, digitei o caminho do arquivo para o meu script hospedado.
Atualmente estou hospedando a regra em https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js
.
Aqui está a caneta atualizada, onde estou explicitamente carregando a regra por meio de um
importe {RRule, RRuleSet, rrulestr} de " https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js/ "
Esse código, que vejo que você tentou, é a sintaxe ES6 correta (embora pareça que faltou uma vírgula no seu código). Parece que o S3 está bloqueando a tentativa de acesso (se você olhar para o console, ele está respondendo com um código de status 403 proibido).
Aqui está um projeto simples que importou a regra: https://stackblitz.com/edit/js-bbaffe
Tão estranho, S3 está definitivamente carregando o recurso em meu console
Pelo que eu entendi, não há outras dependências que eu preciso carregar, certo (eu tentei adicionar o texto digitado, mas isso não pareceu importar)?
Se eu tivesse um ambiente npm, copiaria aquele adorável projeto stackblitz que você forneceu, mas infelizmente estou limitado apenas ao código do lado do cliente: /
De acordo com o Google , a extensão do arquivo pode ser importante nos módulos.
Uma nota sobre extensões de arquivo
Você deve ter notado que estamos usando a extensão de arquivo.mjs
para módulos. Na Web, a extensão do arquivo realmente não importa, contanto que o arquivo seja servido com o tipo MIME JavaScripttext/javascript
. O navegador sabe que é um módulo por causa do atributo type no elemento de script.
Parece que meus arquivos não são servidos como text/javascript
mas sim como application/javascript
ou application/x-javascript
. Será esse o problema? Alguém aqui tem uma versão hospedada do rrule que o entrega com o tipo MIME text/javascript
?
Hmm, então eu nunca tive motivos para importar um módulo ES6 diretamente para o navegador (embora este possa ser um módulo UMD), mas parece que o código a seguir funciona no 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())
Tão estranho, S3 está definitivamente carregando o recurso em meu console
Talvez você esteja logado em sua conta amazon em seu computador
Isso é o que eu estava pensando, mas não, posso acessar esse arquivo no modo anônimo e em um segundo computador que não tem acesso. Como visto aqui , até tentei carregar o script do jsdeliver sem sorte.
@zeluspudding você não viu meu comentário anterior?
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"
funciona para mim no codepen.
Oh, sinto muito - perdi seu comentário. E sim! Funciona :)
Muito obrigado! Eu realmente aprecio toda a ajuda.
Eu sugiro talvez uma atualização para o guia de primeiros passos com seu trecho de código (para este caso de importação de um módulo ES6 diretamente para o navegador). Posso enviar uma solicitação de pull, se você quiser
Para qualquer pessoa interessada em jogar com o rrule no observável visite este link .
Comentários muito úteis
Hmm, então eu nunca tive motivos para importar um módulo ES6 diretamente para o navegador (embora este possa ser um módulo UMD), mas parece que o código a seguir funciona no codepen: