2021

Question

是否有可能误用从github repo中获取文件作为jsFiddle中的外部资源？

Answer 1

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

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

enter image description here

然后从您带来的页面复制URL。您会注意到，如果您尝试直接使用它，您将收到来自JSFiddle的警告。

enter image description here

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

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.

获取该网址并访问 rawgit.com 。这将为您提供格式https://rawgit.com/nnnick/Chart.js/master/Chart.min.js的网址，然后您可以使用该网址。

我已经尝试过并测试了它，似乎没有问题

Answer 2

这是一个更新的答案，因为Github的网址已经略有变化......我遇到了这个问题，并在今天找到了它。希望这有助于人们最近找到这篇文章。 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

Answer 3

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

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

Answer 4

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

fiddletest / test1（小提琴是回购名称，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
...

可能你已经注意到并且在小提琴链接中。如果小提琴是纯粹的js，那么库名应该是＆＃34;库＆＃34;版本应该是＆＃34;纯＆＃34;

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

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

Answer 5

现在JSDelivr似乎是最好的选择。

Answer 6

更新

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

这是我的方法。它现在可以运行（ now （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（如果是为节点创建的）。

here is我正在谈论的小提琴。

旧答案 （可以，但是有点慢）

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

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

什么

require('lorem', 'ipsum')

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

here it is

second example使用相同的技术。

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

Answer 7

2021

只需转到 github 文件并单击“下载”按钮并复制 URL - 它适用于 int a[][3] = { 0, 1, 2, 3, 4, 5 }; - 工作示例 here （它不适用于 SO 代码段 - 我不知道为什么） - 来自 this 文件的示例网址：

https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/glTF-Embedded/VC.gltf

在jsFiddle中引用GitHub文件

7 个答案:

2021