将particle.js 包含到rails / webpack 项目中答案

【问题标题】：Include particles.js into rails / webpack project将particle.js 包含到rails / webpack 项目中
【发布时间】：2019-08-24 11:11:08
【问题描述】：

我有一个基于 Rails 6.0.0.rc2 的项目，包括 webpack。我试图简单地包含库particles.js

我正在关注 GitHub 自述文件： - 使用 yarn 安装库 - 添加具有特定 id 的容器 - 尝试使用particleJS.load初始化函数

显然，它不起作用：particleJS 未定义

particle_js__webpack_imported_module_0___default.a.load 不是功能

在阅读了很多关于这个主题的问题后，但没有什么是真正清楚的。这里有一些线索，但我没有成功：

我知道particleJS链接到window对象。确实，当我在控制台中尝试particleJS 时，它可以工作。

那么你能简单地告诉我如何在 webpack 中使用particleJS 吗？或者如何在 webpack 中使用窗口函数？

提前感谢您的努力！

【问题讨论】：

标签： javascript ruby-on-rails webpack particles.js

【解决方案1】：

欢迎来到 Rails+webpacker 混乱。理论上你会做这样的事情：

let particlejs = require("particlejs");

这在你的包文件中。然后你的 window 对象中就有了可用的particlejs。

你也可以这样做：

// config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery',
      particle_js: 'particlejs'
    }
  }
}

也试试这个：

import 'particles.js/particles';
const particlesJS = window.particlesJS;
particlesJS.load('particles-js', 'particles.json', null);

【讨论】：

感谢您的回答。但是，我无法弄清楚它是如何工作的。这样做let particlejs = require("particlejs"); 不起作用，因为库不导出模块。对于第二个选项，我不明白它是如何工作的。如果我将代码添加到新文件 custom.js 中，我该怎么办？如何调用 particlesJS.load 初始化粒子的函数？

【解决方案2】：

我遇到了同样的问题，这是我为使其正常工作所做的。

如果您使用 yarn 安装/添加软件包，请从应用程序的根目录运行以下命令，将particle.js 添加到 node_modules 文件夹：

yarn add particles.js

现在打开 app/javascript/packs/application.js 并添加以下内容：

require("particles.js")

现在重新启动您的 Rails 服务器，它应该可以工作了。

【讨论】：