如何将第三方 JavaScript 库添加到 Meteor 应用程序？

Posted 2023-03-08

【中文标题】如何将第三方 JavaScript 库添加到 Meteor 应用程序？

【英文标题】：How can I add third-party JavaScript libraries to a Meteor application?

【发布时间】：2012-06-16 02:54:20

【问题描述】：

我想向 Meteor 应用添加 javascript 前端插件，例如 jquery.center.js。

如果我将它放在我的 app/ 目录中并刷新页面，我会收到此错误：

您的应用正在崩溃。这是最新的日志。

node.js:201 扔 e; // process.nextTick 错误，或第一次滴答时的 'error' 事件 ^ ReferenceError: jQuery 未定义 在 app/jquery.center.js:43:1 在 /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:111:21 在 Array.forEach（本机） 在功能。 (/Users/crapthings/Desktop/app/.meteor/local/build/server/underscore.js:76:11) 在 /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:97:7 退出代码：1 您的应用程序正在崩溃。等待文件更改。

【问题讨论】：

Things (and the correct answer) have changed quite radically since Meteor v1.3.

【参考方案1】：

把它放在client文件夹中，这样它就只在客户端加载，不需要在服务器上加载jQuery。

【参考方案2】：

您将 jquery 插件 javascript 文件直接放在 app 文件夹中，以便为客户端和服务器加载 javascript 文件。

根据 Meteor 文档： 客户端从以下位置加载 javascript：project/public 和 project/client 服务器从以下位置加载 javascript：project/public 和 project/server 文件夹。

从 v1.0 开始，Meteor 在客户端内部使用 jQuery，因此您可以直接使用您的库而无需添加 jQuery。但是，建议您将 jQuery 显式添加到您的 Meteor 项目中：

流星添加jquery

Meteor 文档深入解释 how JavaScript files are loaded and where static assets should go（CSS、图像）。

另请参阅how to repackage an existing library for Meteor。

【讨论】：

资产（css，图像，...）呢？你把它们放在哪里了？

Css 和图像应该放在项目根目录下的“public”目录中。更多：Where should I put my files?

【参考方案3】：

从 Meteor 1.3 开始，你可以add 3rd party JavaScript libraries to a Meteor project directly via their npm package:

meteor npm install --save moment

服务器端和客户端包都无需修改即可工作，因为 Meteor 的 ES2015 模块系统负责在客户端创建类似 Node 的环境，就像 browserify 或 webpack 所做的那样。

如果 npm 包碰巧不能正常运行，请在 Atmoshpere 上查找包装器。 Atmosphere 是 Meteor 的官方第 3 个软件包存储库，但在 Meteor v1.3 之后，相关性越来越低。最终会是phased out。

历史

在 Meteor 1.3 之前，您必须repackage 3rd party libraries for Meteor。开发了一个名为 Autopublish 的工具来自动化该过程。在 Meteor Development Group 停止在 meteor.com 上提供免费托管后，Autopublish 也停止了。

【参考方案4】：

在 MeterorJS 1.3.x 中执行此操作的一种方法

在public\js\目录下添加JS文件

使用 client/main.js 中的 $.getScript 从 Meteor.startup 方法加载它 如果要控制脚本加载顺序，可以为每个 js 文件使用多个 $.getScript 进行控制。

Meteor.startup(function()
    $.getScript('js/fhir-client.js', function()
        // script should be loaded and do something with it. 

    );
);

【讨论】：

如果第三方库在npm上，最好add it from npm。