添加和使用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"
},

但我不知道如何在流星内部使用它？

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

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

我已经运行了jQuery，尝试并测试了一些console.log输出，并尝试在main.html中添加带有标准<script>标记的js插件文件，但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({ });
}

感谢弗雷德的帮助。据我所知，到目前为止，我对Meteor的接触有限，这是一个很棒的平台，我肯定会坚持下去，但你真的必须跟上更新，因为随着方法的改变，版本之间的事情经常会发生变化。换言之，如果你是像我这样的新手，使用最新版本，不要费心去学习任何一年多的Meteor教程，除非你已经准备好进行一些调试和深入文档，看看为什么旧代码不再有效。但话说回来，这样做最终会给你一个更广泛的知识库，这也是我们都在努力的：)

Answer 1

我将带您了解overlayscrollbars如何工作的步骤，以便我们了解将其包含在应用程序中的正确方法。

1. 我首先查看源的package.json文件，特别是指向js/OverlayScrollbars.js的main:密钥

2. 我查看js/OverlayScrollbars.js，看看它是否导出了一个模块。您可以在第14-21行看到，它使用UMD模式来指定其导出。

   因为Meteor使用CommonJS进行模块管理，所以module.exports对象是import something from 'overlayscrollbars';时得到的对象

   在第6039行的底部，我还注意到它将OverlayScrollbars放到全局范围中，即使它处于模块环境中。

   如果检测到jQuery，它也会在6042-6058 行注册为jQuery插件

   现在我们知道，如果我们愿意，我们可以进口它，但它也应该在全球范围内提供。

3. 下一个关键的事情是确保模块运行，这样它才能真正在全局范围内结束。我更喜欢在每个依赖它的文件中使用导入语法，这样，当你最终更改该文件或孤立地测试它时，它会带来所有的依赖关系。

那么我该如何导入它呢

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

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

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

• overlayScrollbars在该文件中可用
• OverlayScrollbars在窗口/全局范围内
• overlayScrollbars是一种针对jQuery对象的方法

所以问题一定是其他方面的。你看到了什么错误？你把进口对账单放在哪里了？

---

查看您的呼叫代码：

1. 您不需要自动运行，因为您没有调用任何反应性数据源。(如果你这样做，会导致不必要的整个应用程序重新渲染)

2. 我会将滚动条代码移动到呈现.main-content的组件的componentDidMount钩子中。这样，在运行代码时就保证了元素的存在。

3. 不需要将其封装在$(function(){...})块中。document.ready事件与React应用程序无关

---

最后一次编辑

对于没有UMD模式的jQuery插件，通常使用直接的import 'plugin-name';。

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