在chrome检查器中快速导入库

Quickly importing libraries in the chrome inspector

本文关键字:导入 chrome 检查      更新时间:2023-09-26

是否有从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——这是我学习的最佳方式。

对不起,但不完全是你想要的方式。但是你可以为自己建立一个实验环境,通过给库一个简短的名字来让库加载得更快,并通过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的依赖关系。