时间戳

首页 > 解决方案 > 使用 Meteor v1.7.0.3 添加和使用 jQuery 插件

javascript - 使用 Meteor v1.7.0.3 添加和使用 jQuery 插件

问题描述

大约一周前才第一次开始使用 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 版本有关。

main.html我已经运行了 jQuery，使用一些 console.log 输出进行了尝试和测试，并尝试使用标准标签添加 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({ });
}

感谢弗雷德的所有帮助。从到目前为止我对 Meteor 的有限接触所收集到的信息来看，它是一个很棒的平台，我肯定会坚持使用它，但是你真的必须跟上更新，因为版本之间经常出现问题，因为方法是改变了。换句话说，如果你是像我这样的新手，使用最新版本，除非你准备好进行大量的调试和挖掘文档，否则不要费心去尝试任何一年多前的 Meteor 教程看看为什么旧代码不再有效。但话又说回来，这样做最终会给你一个更广泛的知识库，这是我们都在努力的:)

标签： javascriptjquerymeteor

解决方案

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

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

  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. 我会将滚动条代码移动到componentDidMount呈现的组件的挂钩中.main-content。这样，当代码运行时，元素就可以保证存在。

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

最后一次编辑

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

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

推荐阅读