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

2019年7月28日 174次阅读

大约一周前第一次才开始使用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,尝试并测试了一些console.log输出,并尝试使用标准< script>在main.html中添加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文件中导入它而不是导出组件的模板.

此外,为了清除它的启动方式(删除doc准备好),调用被移动到组件中,如下所示：

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

感谢Fred的所有帮助.从目前为止我收集到的Meteor有限的曝光,这是一个非常棒的平台,我肯定会坚持下去,但你必须要跟上更新,因为版本之间的关系很多改变.换句话说,如果您是像我一样的新手,使用最新版本,请不要试图遵循任何超过一年的Meteor教程,除非您准备好进行相当多的调试和挖掘文档看看为什么旧代码不再有效.但话说回来,这样做最终会给你一个更广泛的知识基础,这是我们都在努力的目标:)

最佳答案 我将带您了解overlayscrollbars的工作原理,以便我们了解将其包含在您的应用中的正确方法.

>我首先查看源代码的package.json file,特别是main：指向js / OverlayScrollbars.js的键
>我查看js/OverlayScrollbars.js以查看它是否导出模块.您可以在lines 14-21上看到它使用UMD模式指定它的导出.

因为Meteor使用CommonJS进行模块管理,所以当你从’overlayscrollbars’导入东西时,你会得到module.exports对象;

我还注意到line 6039底部它将OverlayScrollbars放到全局范围内,即使它在模块环境中也是如此.

如果检测到jQuery,它还会在lines 6042-6058上注册为jQuery插件

现在我们知道如果需要我们可以导入它,但它也应该在全球范围内可用.
>下一个关键是要确保模块运行,以便它实际上最终在全局范围内.我对此的偏好是在每个依赖于它的文件中使用导入语法,这样当您最终更改该文件或单独测试它时,它将带来所有它的依赖性.

那我该怎么导入呢？

您使用’overlayscrollbars’导入overlayScrollbars完全正确;

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

我开始了一个快速的新项目,使用meteor create test并添加了包含流星npm install overlayscrollbars –save并从’overlayscrollbars’添加了import overlayScrollbars;到/client/main.js.

> overlayScrollbars在该文件中可用.
> OverlayScrollbars位于窗口/全局范围内
> overlayScrollbars是jQuery对象的一个​​方法

所以问题必须是别的.你看到什么错误？您在哪里放入进口声明？

查看您的呼叫代码：

>您不需要自动运行,因为您没有调用任何被动数据源. (如果你这样做会导致不必要的整个应用程序重新渲染)
>我将滚动条代码移动到呈现.main-content的组件的componentDidMount挂钩中.这样,在运行代码时,元素就会保证存在.
>无需将其包装在$(function(){…})块中. document.ready事件与React应用程序无关

最后一次编辑

对于没有UMD模式的jQuery插件,通常是直接导入’plugin-name’;将工作.

如果这不起作用(通常是因为UMD部分损坏),在Meteor中你可以将文件复制到客户端/兼容性/文件夹中,它们将在没有任何模块包装的情况下加载,将它们的变量作为最后一个暴露给全局范围采取.这相当于直接添加脚本标记

点赞