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的工作方式，以便我们了解将其包含在您的应用中的正确方法。

我首先查看源代码的package.json file，尤其是指向main:

js/OverlayScrollbars.js

我看着js/OverlayScrollbars.js看看它是否导出模块。您可以在lines 14-21上看到它使用UMD模式来指定其导出。

由于Meteor使用CommonJS进行模块管理，因此module.exports就是您获得的import something from 'overlayscrollbars';对象

我还注意到在line 6039的底部，即使在模块环境中，它也将OverlayScrollbars置于全局范围内。

如果检测到jQuery，它也会在lines 6042-6058
上注册为jQuery插件。
现在我们知道我们可以根据需要导入它，但是它也应该在全球范围内可用。
下一个关键是要确保模块运行，从而使其最终在全局范围内运行。我的首选是在每个依赖该文件的文件中使用导入语法，这样当您最终更改该文件或对其进行单独测试时，它将带动其所有依赖关系。

那我该如何导入它？

您完全同意import overlayScrollbars from 'overlayscrollbars';

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

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

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

所以问题一定是其他的。您看到什么错误？您将导入声明放在哪里？

查看您的呼叫代码：

您不需要自动运行，因为您无需调用任何反应式数据源。（如果这样做，则会导致不必要的整个应用重新渲染）
我将滚动条代码移到呈现componentDidMount的组件的.main-content挂钩中。这样一来，在代码运行时就可以确保该元素存在。
无需将其包装在$(function(){...})块中。 document.ready事件与React应用无关

最后一次修改

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

如果这不起作用（通常是因为UMD部分损坏），则可以在Meteor中将文件复制到client/compatibility/文件夹中，并且将在不进行任何模块包装的情况下加载它们，从而将它们的变量暴露给全局变量。范围是不得已的方法。这等效于直接添加脚本标签

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

1 个答案: