在chrome检查器中快速导入库

时间:2014-03-18 22:06:14

标签: javascript google-chrome coffeescript web-inspector

有没有从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)。我是一个蟒蛇人,我已经习惯于在我的PATH中插入任何已安装的模块。我希望能够以类似的方式玩js - 这就是我学得最好的方式。

1 个答案:

答案 0 :(得分:5)

抱歉,但不是完全按照你想要的方式。但是你可以为自己设置一个实验室环境,通过给它一个简短的名称并通过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,

高级版:您可以通过BrowserifyNPM的组合,创建 了解相关性的实验室环境。