在 chrome 检查器中快速导入库答案

【问题标题】：Quickly importing libraries in the chrome inspector在 chrome 检查器中快速导入库
【发布时间】：2014-03-18 22:06:14
【问题描述】：

有没有快速从 js/coffee 控制台导入库的方法？现在，每次我需要使用库时，我都会注入一个将 cdn 链接到我的 DOM 的脚本元素，如下所示：

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

这真的很痛苦。必须有某种方法可以在本地存储常用库，然后允许我的控制台使用 requirejs 或其他东西在一行中导入它们（并且不记住 cdn url）。我是一个 python 人，我非常习惯于能够在我的 PATH 中使用任何已安装的模块进行即插即用。我希望能够以类似的方式玩 js——这是我学习得最好的方式。

【问题讨论】：

标签： javascript google-chrome coffeescript web-inspector

【解决方案1】：

对不起，但不完全按照您想要的方式。但是您可以为自己设置一个实验室环境，通过给它一个短名称并通过cdnjs 获取这些库，您可以更快地加载库，它们具有合理可预测的 URL 路径名称。

函数看起来有点像这样：

window.jsopen = function(path) {
  var el = document.createElement('script');
  if(path.indexOf('http') == 0) {
    el.src = path;
  } else {
    el.src = '//cdnjs.cloudflare.com/ajax/libs/'+path;
  }
  document.head.appendChild(el);
}

将其嵌入到一段简单的 HTML 中并打开开发人员工具，然后在其旁边的选项卡中打开 CDNJS 站点。现在您应该能够通过完整的 URL 或路径的最后部分导入库。在您的示例中使用 jQuery 将简化为：

> jsopen('jquery/2.0.3/jquery.min.js')
undefined
> $
function (e,n){return new x.fn.init(e,n,t)}

它仍然不像你可以在 Python 上得到的那样，但它比你在问题中描述的那样做整个事情要好一点。

还要注意函数不（不能）知道依赖关系，所以：

> jsopen('backbone.js/1.1.2/backbone-min.js')
undefined
Uncaught TypeError: Cannot call method 'each' [...]

但是：

> jsopen('underscore.js/1.6.0/underscore-min.js')
undefined
> jsopen('backbone.js/1.1.2/backbone-min.js')
undefined
> Backbone
Object {VERSION: "1.1.2", $: function,

高级版：您可以通过Browserify 和NPM 的组合创建一个确实了解依赖关系的实验室环境。

【讨论】：