如何用Webpacker导入node_modules

Question

我是整个JS/webpacker游戏的新手，我不了解如何使用webpacker导入和使用javascript包。

我试图包括和使用动画上的滚动库。

我已经安装并使用了Webpacker (我知道它可以工作，因为我能够愉快地使用StimulusJs)。

下面是我的/javascript/packs/application.js文件的样子：

import {
  Application
} from "stimulus"
import {
  definitionsFromContext
} from "stimulus/webpack-helpers"
import {
  trix
} from "trix"
import AOS from "aos"

const application = Application.start()
const context = require.context("controllers", true, /.js$/)
application.load(definitionsFromContext(context))
AOS.init();

我的javascript_pack_tag包括在我的application.html.erb中作为<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

我使用/assets/ css /application.scss使用@import 'aos/dist/aos';导入了所需的css文件，所以这不应该是问题所在。

当我尝试通过做类似于<h1 class="text-center" data-aos="fade-in">This is a header.</h1>的事情来使用AOS包时，什么都不会发生。我遗漏了什么？

谢谢。

Answer 1

再读一遍，我想这更像是你遇到的JS问题。为了方便起见，我将保留下面关于CSS的观点。如果您还没有使用webpack-dev-server，请参阅关于它的第四点。您的浏览器支持延迟吗？您可以尝试将脚本移到</body>之前查看。我可能只是切入追逐，在AOS.init()中设置一个javascript断点，看看发生了什么。

我最近学到了几点，以帮助更好地理解webpacker/css/链轮.

First，CSS中的资产文件夹在webpack之外。是链轮。这不是一个问题，但往往是混合这两者带来的挑战。

至少，除了pack标记之外，您还需要一个stylesheet_link_tag 'application'...。

第二代，是通过yarn添加AOS，还是通过gem添加？和webpack在一起的宝石可能有点棘手。我和其他我遇到的人放弃了尝试使用创业板资产的webpack。webpack最好坚持纱线/npm模块。否则，将所有资产移动到链轮管道(即assets/文件夹中)，并将其用于站点的这一部分。(把它们混合在一起是可以的，只要把它们分开就行了)。

第三，如果AOS模块是通过yarn add ...添加的(即它驻留在nodule_modules目录中)，那么尝试将CSS导入替换为

@import '~aos';

这是因为node_modules在搜索路径中，如果插件文件夹有一个package.json清单并且包含一个“样式”条目，它会从那里提取css文件路径。

第三代，您可以尝试将CSS移动到webpack。试试这个..。

1. 在您的application.scss子文件夹中创建一个components文件
2. 添加到您的packs/application.js文件：import '../components/application.scss
3. 将stylesheet_pack_tag 'application' ....添加到布局中
4. 将css导入(从节点模块)放到新的application.scss中

第四：使用bin/webpack-dev-server。每当您的源文件发生任何更改，而不是每次加载页面时，这都会动态地编译webpack (节省大量时间)。因为您的CSS现在在webpack下面，如果导入不正确(虽然链轮也应该在服务器日志中这样做)，它会给您带来错误。

祝好运!它变得更容易，纱/webpack是凉爽的，比旧的红宝石为前端组件，国际海事组织。