Rails 6.0.0中使用interact.js外部JavaScript库遇到问题，求正确引入方法

Hey there! I totally get how frustrating it can be when external JS libraries don't play nice with Rails 6—especially since Rails shifted to webpacker for JS management, which is a big change from older asset pipeline setups. Let's walk through exactly how to get your slider working.

First: Install the Dependency Properly #

Rails 6 uses Yarn to manage JS packages, so start by installing interact.js in your project:

yarn add interactjs

This adds the package to your package.json and downloads it to your node_modules folder—this step is crucial because it lets webpack access the library.

Second: Organize Your JS Code Correctly #

You can't just drop import statements directly into a view's <script> tag in Rails 6 (unless you use type="module", which gets messy with webpack paths). Instead, we'll create a dedicated JS module:

1. Create a new file at app/javascript/src/slider.js (the src folder keeps your code organized—you might need to create it first).
2. Paste this updated version of your code (notice we wrap everything in a turbo:load event to make sure the DOM is ready before we try to interact with elements):

import interact from '@interactjs/interact';
import '@interactjs/auto-start';
import '@interactjs/actions/drag';
import '@interactjs/actions/resize';
import '@interactjs/modifiers';

// Wait for Turbo to finish loading the page (use DOMContentLoaded if you don't use Turbo)
document.addEventListener('turbo:load', () => {
  const slider = interact('.slider');

  slider
    .draggable({
      origin: 'self',
      inertia: true,
      modifiers: [
        interact.modifiers.restrict({
          restriction: 'self'
        })
      ],
      listeners: {
        move (event) {
          const sliderWidth = interact.getElementRect(event.target).width;
          const value = event.pageX / sliderWidth;

          event.target.style.paddingLeft = `${value * 100}%`;
          event.target.setAttribute('data-value', value.toFixed(2));
        }
      }
    });
});

3. Import this module into your main JS bundle. Open app/javascript/packs/application.js and add:

import '../src/slider';

Third: Set Up Your CSS #

Your CSS is fine, but let's make sure Rails loads it properly:

1. Move your slider CSS to app/assets/stylesheets/slider.scss (create the file if needed).
2. Open app/assets/stylesheets/application.scss and add:

@import 'slider';

This ensures your slider styles are included in the asset pipeline's compiled CSS.

Fourth: Update Your View #

Remove the <script> tag from your view—all your JS is now bundled into application.js. Your view should just have the HTML:

<div class="sliders">
  <div class="slider"></div>
  <div class="slider"></div>
  <div class="slider"></div>
</div>

Finally: Test It Out #

1. Restart your Rails server if it's running.
2. Start the webpack dev server (this compiles your JS in real-time):

bin/webpack-dev-server

3. Visit your page—your sliders should now be draggable!

Common Troubleshooting Tips #

• If you get "interact is not defined" errors: Double-check that you ran yarn add interactjs and that your imports in slider.js are correct.
• If sliders don't respond: Make sure you're using turbo:load (or DOMContentLoaded if you disabled Turbo) to wait for the DOM to load before initializing interact.js. If your JS runs before the .slider elements exist, it won't find them.
• Check webpack errors: Look at the terminal running bin/webpack-dev-server—it will tell you if there's a problem with your imports or code.

内容的提问来源于stack exchange，提问作者Riley