在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中使用interaction .js，但我无法让它工作。我是一个新手，所以这可能是一个常见的问题，但我如何正确地导入一个外部库，如interaction .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

你不能像这样使用那些import语句。如果从CDN导入库，可以像文档中那样使用它。看看https://interactjs.io/docs/installation CDN预捆绑使用。我假设interact是全局暴露的，你不需要导入任何东西。

如果你想采取正确的方式，你应该为你的前端应用程序设置一个单独的项目/文件夹。然后必须构建该应用程序，并将构建的发布文件附加到Rails HTML中。这取决于你的目的。