jsFiddle中的参考GitHub文件

Question 1

是否有可能将github存储库中的抓取文件滥用为jsFiddle中的外部资源？

Question 2

这是一个更新的答案，因为Github的URL略有更改。我遇到了这个问题，并想出了今天的方法。希望这可以帮助人们最近找到这篇文章。Bootswatch中的Bootstrap Slate主题示例：

原始文件网址：https： //raw2.github.com/thomaspark/bootswatch/gh-pages/slate/bootstrap.css
取出2.后raw：https://rawgithub.com/thomaspark/bootswatch/gh-pages/slate/bootstrap.css

而已！：D

Question 3

TLDR；访问rawgit.com，它将直接从GitHub将您的文件弹出CDN，以便您使用它们。

不幸的是，这里没有答案对我有用。由于rawgithub连接被拒绝，URL似乎不起作用。因此，这里有一个可行的完整解决方案。首先，在GitHub中，您需要单击Raw按钮以获取原始JavaScript。

在此处输入图片说明

然后从您的页面复制URL。您会发现，如果尝试直接使用它，则会收到JSFiddle的警告。

在此处输入图片说明

更重要的是浏览器会给您一个错误，例如：

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.

使用该URL并访问rawgit.com。这将为您提供https://rawgit.com/nnnick/Chart.js/master/Chart.min.js可以使用的格式的URL 。

我已经尝试并测试了这一点，它似乎工作正常，没有问题

Question 4

如今，JSDelivr似乎是最好的选择。

Question 5

更新

如何像使用CDN一样使用或滥用github并不是只有良性的“提琴手”才有的想法。罪犯也有这种想法。不幸的是，GitHub既免费又匿名，因此很容易被滥用。据我所知，上述某些解决方案已被打破的事实与此有关。

这是我的方法。它现在可以使用（2019年11月），但是公认它不太方便。

如果您还没有一个github帐户，请自己获取。创建一个名称与您的github用户名相同的存储库。该存储库（仅该存储库）-我将其称为“家庭存储库”-您可以将其用作网络托管服务。https：// yourGithubUserName .github.io将向公众显示您的家庭存储库“原始/原样”。（文件夹内容未显示，您必须拥有index.html）

现在，如果您想在拨弄中使用其他人的github回购，只需将完整回购复制到您的家庭回购中，然后在拨弄的HTML部分中使用script标签的src属性引用该回购的副本即可。。像这样：

<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>

上面的代码片段显示了正在工作的小提琴的HTML部分，该部分正在使用节点模块esprima，estraverse和escope，即同名的github存储库。thirdparty在那里是因为那是我放置副本的子文件夹的名称（在我的家庭仓库中）。

就像我说的那样，这不是很方便（通过复制和粘贴将其全部设置），但这对我有用。

我应该提到，仅复制/粘贴可能还不够，您可能必须在引用的存储库上进行browserify或webpack（如果是为节点创建的，就是这样）。

这是我在说的小提琴。

OLD ANSWER （有效，但有点慢）

您可以使用requirify。它使您能够在浏览器命令行中要求（因为它在节点中）；但是我也测试了它。与上面的其他方法相比，我不知道它是否是“最好的”（因为我没有对所有方法进行过测试）。

这是一个示例文件，其中先加载esprima（JavaScript解析器），然后加载escodegen（取决于esprima的反向javascript解析器），然后解析并重新生成一些简单的javascript代码。

什么

require('lorem', 'ipsum')

确实，它从npm加载ipsum节点模块，并将结果放入名为lorem的全局变量中。因此，这仅适用于npm模块，而不适用于通用的github文件，这些文件也不是节点模块。不应有太大的限制，因为如果它是您自己的项目，则始终可以将其转换为节点模块。

这里是

使用相同技术的第二个示例。

（（（（实际上是更简单，如小提琴所示。您可以将2个require语句一个接一个地放，您之间不需要回调函数（只需一个回调函数就可以等到两个都被加载））））

Question 6

另一种可能性是将Git库添加到cdnJS脚本存储库（他们写道，将接受在GitHub上流行的任何库），然后将其用作外部资源。

刚刚发现：http：//jsdb.io/上有很多Javascript库，在那很容易添加新的Java库-我只需要输入Github存储库的URL。

Question 7

如果以下文件夹结构中有git repo

fiddletest / test1（fiddletest是存储库名称，而test1是文件夹）

那么相应的jsfiddle链接将是

http://jsfiddle.net/gh/get/<library name>/<version>/<github user name>/fiddletest/tree/master/test1/

文件夹和文件结构必须是这样的

fiddletest(the repo name)
|____ test1
      |____ demo.html
      |____ demo.js
      |____ demo.css
      |____ demo.details

除了这三个文件外，其他将被忽略。详细信息文件应包含小提琴详细信息和外部资源（如果有）的链接，如下所示

---
name: test fiddle repo
description: this is a test repo
resources: 
  - http://abc.xyz.com/abc.js
  - http://abc.xyz.com/abc2.js
...

可能您已经注意到了and提琴演奏中的链接。如果小提琴使用纯js，则库名应为“ library”，版本应为“ pure”

简而言之，引用到github的小提琴链接应采用以下格式

http://jsfiddle.net/gh/get/<library name>/<version>/<github user name>/<repo name>/tree/<branchname>/<folder name>/