将particles.js 包含到rails / webpack 项目中

Question

I have a project based on Rails 6.0.0.rc2 including webpack. I am trying to include simply the library particles.js

I am following the GitHub readme: - Install the library with yarn - Add a container with a specific id - Try to initialize the function using particlesJS.load

Obviously, it is not working: particleJS is not defined

particle_js__webpack_imported_module_0___default.a.load is not a function

After reading a lot of questions on this topic but nothing is really clear. here are some leads but I did not succeed:

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

I understood that particleJS is linked to the window object. And indeed, when I try in the console particleJS, it works.

So could you tell me simply how to use particleJS with webpack? Or how to use a window function into webpack?

Thank you in advance for your efforts!

Answer 1

Welcome to the Rails+webpacker mayhem. In theory you would do something like:

let particlejs = require("particlejs"); 

That goes in your pack file. Then you have particlejs available in your window object.

You can also do:

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

Also try this:

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

Answer 2

I ran into this exact same issue, here is what I did to get it working.

If you're using yarn to install/add packages then run the following command from the root of your application to add the particles.js to the node_modules folder:

yarn add particles.js

Now open up app/javascript/packs/application.js and add the following:

require("particles.js")

Now restart your rails server and it should work.