如何使用 node 和 browserify 实现 jQuery.panzoom

Posted 2023-05-07

【中文标题】如何使用 node 和 browserify 实现 jQuery.panzoom

【英文标题】：How to implement jQuery.panzoom with node & browserify

【发布时间】：2017-06-15 18:40:23

【问题描述】：

plugin's github page 上有如下解释通过 AMD loader 实现插件：

define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) 
  $(document).ready(function() 
    $(".panzoom-elements").panzoom();
  );
);

但是如何通过 nodejs 和 browserify 实现这个插件呢？

【参考方案1】：

此插件使用 UMD（通用模块定义）模式，这意味着您也可以像往常一样将它与 CommonJS/Browserify 模块系统一起使用，就像任何其他 lib/package 一样。

（参见：these lines of source code）。

安装：

npm install jquery.panzoom --save

用法：

main.js

var $ = require('jquery');
require('jquery.panzoom');

$(document).ready(function() 
  $(".panzoom-elements").panzoom();
);

浏览器：

browserify main.js -o bundle.js

【讨论】：

好吧，我复制粘贴了这段代码，它成功了！我不完全明白。我首先做的是：“var panzoom = require('jquery.panzoom');”。这给出了错误：“panzoom 不是函数”。显然，因为在 panzoom 需要之前需要 $ ，所以它确实有效。我可以在我的文件上做 jQuery 的东西，因为我通过 html 脚本包含了 jQuery，所以我不明白为什么我必须在 JS 中要求它才能工作。 $ 对象是全局的..

作为 browserify 的最佳实践，请始终记住在您需要它的每个模块中包含所有依赖项。这里我们需要 jQuery 和 Panzoom，因此两者都包含。

我只是不明白为什么它不能识别我的 jQuery 包含在 HTML 中，我可以在我的所有文件中做 jQuery 的东西。现在 jQuery 也包含在我的 app.js 中，所以它是不必要的带宽 :)

Browserify 是什么？