在 rails 6.0.0 中使用外部 javascript 库时遇到问题

Question

<script>
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

    // Step 1
const slider = interact('.slider')    // target elements with the "slider" class

slider
  // Step 2
  .draggable({                        // make the element fire drag events
    origin: 'self',                   // (0, 0) will be the element's top-left
    inertia: true,                    // start inertial movement if thrown
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'self'           // keep the drag coords within the element
      })
    ],
    // Step 3
    listeners: {
      move (event) {                  // call this listener on every dragmove
        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))
      }
    }
  })
</script>
<style>
.sliders {
  padding: 1.5em
}
/* the slider bar */
.slider {
  position: relative;
  width: 100%;
  height: 1em;
  margin: 1.5em auto;
  background-color: #29e;
  border-radius: 0.5em;
  box-sizing: border-box;

  font-size: 1em;

  -ms-touch-action: none;
     touch-action: none;
}

/* the slider handle */
.slider:before {
  content: "";
  display: block;
  position: relative;
  top: -0.5em;

  width: 2em;
  height: 2em;
  margin-left: -1em;
  border: solid 0.25em #fff;
  border-radius: 1em;
  background-color: inherit;

  box-sizing: border-box;
}

/* display the value */
.slider:after {
  content: attr(data-value);
  position: absolute;
  top: -1.5em;
  width: 2em;
  line-height:1em;
  margin-left: -1em;
  text-align: center;
}</style>
<div class="sliders">
  <div class="slider"></div>
  <div class="slider"></div>
  <div class="slider"></div>
</div>

我正在尝试在 rails 6 中使用 interact.js，但无法正常工作。我是新手，所以这可能是一个常见问题，但我如何正确导入外部库，如 interact.js。我已经尝试了我在网上找到的所有东西，所以我想我正在寻找错误的东西。任何帮助将不胜感激，提前致谢！

Answer 1

此语法：

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

用于 npm 模块导入。如果不对代码进行预处理，则无法在浏览器中执行此操作。您可以像这样导入库，最好在单独的脚本标签中。但是如果你打算只导入一个库你可以设置它

<script src="CDN url"></script>

将其放在其他脚本标签之上。为您的图书馆找到合适的 CDN 主机。示例：https://cdnjs.com/libraries/interact.js/1.0.2

您不能像这样使用那些导入语句。如果你从 CDN 导入库，你可以像在文档中一样使用它。查看 https://interactjs.io/docs/installation CDN pre-bundled 用法。我假设 interact 是全局公开的，你不需要导入任何东西。

如果您想以正确的方式解决这个问题，您需要为您的前端应用程序设置一个单独的 project/folder。然后必须构建该应用程序，并将构建的分发文件附加到 Rails HTML 中。这取决于你的目的。

在 rails 6.0.0 中使用外部 javascript 库时遇到问题

Trouble using external javascript libraries in rails 6.0.0

javascript

ruby-on-rails

interact.js