javascript - 将particle.js 包含到rails / webpack 项目中

Question

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

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

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

particle_js__webpack_imported_module_0___default.a.load 不是函数

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

• https://stackoverflow.com/a/42457020/11027833
• https://github.com/vigetlabs/blendid/issues/287
• https://github.com/VincentGarreau/particles.js/issues/114

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

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

预先感谢您的努力！

Answer 1

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

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

yarn add particles.js

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

require("particles.js")

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

Answer 2

欢迎来到 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);