javascript - 在 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，尝试并测试了一些 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 的工作原理，以便我们了解将其包含在您的应用中的正确方法。

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

的 main: 键

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

   因为 Meteor 使用 CommonJS 进行模块管理，module.exports 对象是您从 'overlayscrollbars' 导入内容时得到的对象；

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

   如果检测到 jQuery，它还会在 lines 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 Hook 中。这样，当代码运行时，保证元素存在。

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

---

最后一次修改

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

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