在 Meteor v1.7.0.3 中添加和使用 jQuery 插件

Question

大约一个星期前才开始第一次使用 Meteor，所以我还在摸索。

我对如何使用通过 npm 安装的 jQuery 插件感到困惑。

我运行 :

meteor npm install overlayscrollbars --save

已将其添加到我的 package.json 文件中...

"dependencies": {
"@babel/runtime": "^7.0.0-beta.51",
"meteor-node-stubs": "^0.4.1",
"overlayscrollbars": "^1.5.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.0"
},

...但我不知道如何在 Meteor 中使用它？

我没有使用 Blaze 模板引擎，而是使用 React。

我发现一些帖子回答了类似的问题，但它们都与使用 Blaze 和非常旧的 Meteor 版本有关。

我有jQuery 运行ning，尝试和测试了一些console.log输出，并尝试在main.html中添加js插件文件与标准<script> 个标签，但 Meteor 根本不喜欢这个。我也试过将它导入到项目中：

import overlayScrollbars from 'overlayscrollbars';

也尝试过：

const overlayScrollbars = require('overlayscrollbars');

但是这些没有任何作用，老实说，我很确定无论如何这都是完全错误的方法。

我也试过将整个插件源添加到客户端app.js，但同样没有任何效果。

在浏览器中查看我的应用程序的源代码时，我可以看到我想使用的文件甚至没有被 Meteor 加载 - PasteBin - 只是关于如何完成这部分的回答将是一个巨大的帮助。

我知道它不起作用，因为当我尝试启动插件时看到控制台错误，说该功能不存在。

我好像到处都找不到指南。

有人可以给我指出一些文档的正确方向，或者解释一下我需要遵循的程序才能使用 Meteor 中的任何 jQuery 插件吗？

** 编辑以显示我在 main.js 中的调用方式（这是在 Meteor 中使用 jQuery 的正确语法吗？）

Meteor.startup(() => {
  Tracker.autorun(() => {
    ReactDOM.render(<p>Sidebar</p>, document.getElementById('sidebar'));
    ReactDOM.render(<App/>, document.getElementById('app'));
    $(function() { 
       $('.main-content').overlayScrollbars({ }); 
    });
  })
});

** 回答后编辑...

我遇到的问题是由于没有在正确的页面上导入插件，我只是在 app.js 文件而不是呈现组件的模板上导入它。

此外，为了清除它的启动方式（准备好文档），调用被移动到组件中，如下所示：

componentDidMount() {
  $('.main-content').overlayScrollbars({ });
}

感谢 Fred 提供的所有帮助。到目前为止，从我对 Meteor 的有限接触中收集到的信息来看，它是一个很棒的平台，我肯定会坚持使用它，但是你真的必须跟上更新，因为版本之间的事情经常中断，因为方法是变了。换句话说，如果你是像我这样的新手，使用最新版本，除非你准备好进行相当多的调试和深入研究文档，否则不要费心尝试遵循任何超过一年的 Meteor 教程看看为什么旧代码不再有效。但话又说回来，这样做最终会给你一个更广泛的知识基础，这是我们都在努力的:)

Answer 1

我将带您逐步了解 overlayscrollbars 的工作原理，以便我们了解将其包含在您的应用中的正确方法。

我首先查看来源的 package.json file，特别是指向 js/OverlayScrollbars.js

main:

我查看 js/OverlayScrollbars.js to see if it exports a module. You can see on lines 14-21 它使用 UMD 模式来指定它的导出。

因为 Meteor 使用 CommonJS 进行模块管理，module.exports 对象就是你在 import something from 'overlayscrollbars';
时得到的对象
我还注意到 line 6039 的底部将 OverlayScrollbars 置于全局范围内，即使它在模块环境中也是如此。

如果检测到 jQuery，它也会在 lines 6042-6058
上注册为 jQuery 插件
现在我们知道我们可以根据需要导入它，但它也应该在全球范围内可用。
下一个关键的事情是确保模块运行s，以便它实际上在全局范围内结束。我对此的偏好是在每个依赖它的文件中使用导入语法，这样当您最终更改该文件或单独测试它时，它会带来所有依赖项。

那么我该如何导入呢？

你完全正确 import overlayScrollbars from 'overlayscrollbars';

所以现在的问题是为什么它不起作用？

我用 meteor create test 开始了一个快速的新项目，用 meteor npm install overlayscrollbars --save 添加了包，并将 import overlayScrollbars from 'overlayscrollbars'; 添加到 /client/main.js。

overlayScrollbars 在该文件中可用。
OverlayScrollbars 在 window / 全局范围内
overlayScrollbars 是 jQuery 个对象的方法

所以问题一定是别的原因。你看到了什么错误？你把导入语句放在哪里了？

查看您的调用代码：

您不需要 auto运行，因为您没有调用任何响应式数据源。（如果你这样做会导致不需要的整个应用程序重新呈现）
我会将滚动条代码移动到呈现 .main-content 的组件的 componentDidMount 挂钩中。这样，当代码为运行.
无需将其包装在 $(function(){...}) 块中。 document.ready 事件与 React 应用程序无关

最后一次编辑

对于没有 UMD 模式的 jQuery 插件，通常直接 import 'plugin-name'; 就可以了。

如果这不起作用（通常是因为 UMD 部分损坏），在 Meteor 中，您可以将文件复制到 client/compatibility/ 文件夹中，它们将在没有任何模块包装的情况下加载，将它们的变量暴露给全球范围作为最后的手段。这相当于直接添加脚本标签

在 Meteor v1.7.0.3 中添加和使用 jQuery 插件

Adding and using a jQuery plug-in with Meteor v1.7.0.3

javascript

jquery

meteor