69 votes

Référence du fichier GitHub dans jsFiddle

Existe-t-il une possibilité de mauvaise utilisation récupérer les fichiers d'un repo github comme ressources externes dans jsFiddle ?

102voto

Ian Points 13892

TLDR ; Visitez rawgit.com qui placera vos fichiers sur un CDN directement depuis GitHub pour que vous puissiez les utiliser.

Malheureusement, aucune des réponses données ici n'a fonctionné pour moi. Le site rawgithub L'URL ne semble pas fonctionner car la connexion est refusée. Voici donc une solution complète qui a fonctionné. Tout d'abord, dans GitHub, vous devez cliquer sur le bouton Raw pour obtenir le JavaScript original.

enter image description here

Puis copiez l'URL de la page à laquelle il vous conduit. Vous remarquerez que si vous essayez de l'utiliser directement, vous recevrez un avertissement de JSFiddle.

enter image description here

Plus précisément, le navigateur vous donnera une erreur, par exemple :

Refused to execute script from https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Prenez cette URL et visitez rawgit.com . Cela vous donnera une URL du format https://rawgit.com/nnnick/Chart.js/master/Chart.min.js que vous pouvez ensuite utiliser.

J'ai essayé et testé ceci et cela semble fonctionner sans problème.

1 votes

Oh. Je viens de lire ton post complet. On dirait qu'ils ont un problème de nom :)

0 votes

@kaiser : Merci de ré-accepter cette réponse, j'espère que cela attirera l'attention sur elle et aidera les futurs utilisateurs.

0 votes

Quelqu'un a déjà répondu à ce sujet, d'ailleurs (mais merci d'avoir ajouté plus de détails et d'avoir utilisé le domaine canonique).

25voto

jaminroe Points 169

Ceci est une réponse mise à jour, puisque les url ont légèrement changé pour Github... J'ai rencontré ce problème et l'ai résolu pour aujourd'hui. J'espère que cela aidera les gens qui ont trouvé ce post récemment. Exemple pour le thème Bootstrap Slate de Bootswatch :

  1. Url du fichier brut : https://raw2.github.com/thomaspark/bootswatch/gh-pages/slate/bootstrap.css

  2. Retirer le 2. après raw : https://rawgithub.com/thomaspark/bootswatch/gh-pages/slate/bootstrap.css

C'est ça ! :D

3 votes

Cela ne fonctionne plus : RawGit a atteint la fin de sa vie utile

23voto

minitech Points 87225

Vous voulez les utiliser à mauvais escient ? :S

Et oui, ça l'est, il suffit de prendre la copie brute. Prenez l'URL (disons https://github.com/rninty/tail/blob/master/sprint.js ), ajoutez raw. avant github et retirer le blob/ partie :

https://raw.github.com/rninty/tail/master/server.js

Vous pouvez maintenant créer un lien vers cette ressource externe.

5voto

peterhil Points 594

De nos jours, JSDelivr semble être la meilleure option.

2voto

mathheadinclouds Points 551

UPDATE

L'utilisation ou la mauvaise utilisation de github comme une sorte de CDN n'est pas une idée que seuls les "bricoleurs" bienveillants ont, les criminels ont aussi cette idée. Malheureusement, github, étant aussi libre et anonyme qu'il l'est, est susceptible d'être utilisé à mauvais escient. Pour autant que je puisse dire, le fait que certaines des solutions ci-dessus sont des choses qui sont maintenant cassées, a à voir avec cela.

Voici comment je m'y prends. Cela fonctionne maintenant (novembre 2019), mais il est vrai que ce n'est pas très pratique.

Obtenez vous-même un compte github, si vous n'en avez pas déjà un. Créez un dépôt dont le nom est identique à votre nom d'utilisateur github. Ce dépôt (et uniquement ce repo), - je l'appellerai le "repo maison" - que vous pouvez utiliser comme service d'hébergement web. https : // votre nom d'utilisateurGithub .github.io montrera votre dépôt personnel "brut/comme il est" au public. (Le contenu des dossiers n'est pas affiché, et vous DEVEZ avoir un index.html).

Maintenant, si vous voulez utiliser le repo github de quelqu'un d'autre dans un fiddle, il suffit de copier le repo complet sur votre repo personnel, puis de référencer votre copie de ce repo avec l'attribut src d'une balise script dans la partie HTML du fiddle. Comme ceci :

<head>
    <script src="https://mathheadinclouds.github.io/thirdparty/esprima.js"></script>
    <script src="https://mathheadinclouds.github.io/thirdparty/estraverse.browser.js"></script>
    <script src="https://mathheadinclouds.github.io/thirdparty/escope.browser.js"></script>
</head>
<body></body>

Le snippet ci-dessus montre la partie HTML d'un bidule fonctionnel qui utilise les modules node esprima, estraverse et escope, c'est-à-dire les dépôts github du même nom. thirdparty est là parce que c'est le nom du sous-dossier (dans mon dépôt d'origine) où je mets les copies.

Comme je l'ai dit, ce n'est pas très pratique (beaucoup de copier-coller pour tout mettre en place), mais c'est ce qui fonctionne pour moi.

Et je dois mentionner que le simple copier/coller peut ne pas être suffisant, vous pouvez avoir à faire browserify ou webpack sur le repo référencé (s'il a été fait pour node, c'est-à-dire).

voici le violon dont je parlais.

ANCIENNE RÉPONSE (fonctionne, mais est un peu lent)

Vous pouvez utiliser requérir . Il est fait pour vous permettre d'exiger (comme c'est le cas dans node) sur la ligne de commande du navigateur ; mais il fonctionne aussi dans fiddles, je l'ai testé. Je n'ai aucune idée si c'est "la meilleure", comparée aux autres méthodes ci-dessus (puisque je ne les ai pas toutes passées en revue et testées), mais elle fonctionne.

Voici un exemple de manipulation qui charge esprima (analyseur javascript), puis escodegen (analyseur javascript inverse dépendant d'esprima), puis analyse et régénère un code javascript simple.

ce que

require('lorem', 'ipsum')

c'est-à-dire qu'il charge le module ipsum node de npm, et met le résultat dans une variable globale nommée lorem. Donc c'est seulement pour les modules npm et pas pour les fichiers github généraux qui ne sont pas aussi des modules node. Il ne devrait pas y avoir beaucoup de restrictions puisque vous pouvez toujours le transformer en module node si c'est votre propre projet.

c'est ici

deuxième exemple en utilisant la même technique.

(((En fait, c'est même plus simple, comme le montre le violon. Vous pouvez simplement mettre les 2 déclarations require l'une après l'autre, vous n'avez pas besoin d'une fonction callback entre les deux (juste une fonction callback pour attendre que les deux soient chargées)))).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X