Question

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

我正在尝试包括并使用Animate On Scroll库。

我已经安装并运行了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();

我的application.html.erb中包含我的javascript_pack_tag为 <%= 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 / sprockets ...

首先，资产文件夹中的CSS在webpack之外。是链轮。这不是问题，但经常会把这两个问题混合在一起。

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

第二，是通过yarn添加AOS还是宝石？使用webpack的宝石可能有点棘手。我和我遇到的其他人放弃了尝试在Webpack中使用gem资产的想法。最好坚持使用webpack的yarn / npm模块。否则，将所有资产移动到链轮管道中（即，在assets/文件夹中），并将其用于网站的此部分。（可以将它们混合在一起，只需将它们分开）。

第三，如果AOS模块是通过yarn add ...添加的（即它位于nodule_modules目录中），则尝试将CSS导入替换为

@import '~aos';

之所以可行，是因为node_modules在搜索路径中，并且如果插件文件夹具有package.json清单，并且其中包含“样式”条目，则会从那里拉出CSS文件路径。

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

在您的application.scss子文件夹中制作一个components文件
添加到您的packs/application.js文件中：import '../components/application.scss
在布局中添加stylesheet_pack_tag 'application' ....
将css导入（从节点模块）放入新的application.scss

第四：使用bin/webpack-dev-server。每当您的任何源文件发生更改时（而不是在每次页面加载时），它都会即时编译Webpack（节省大量时间）。由于您的CSS现在位于webpack下，因此如果导入不正确，它将给您错误（尽管链轮也应该在您的服务器日志中执行此操作）。

祝你好运！它变得更容易，并且纱/卷装很酷，比旧的Ruby-Ruby前端组件更好

如何使用Webpacker导入node_modules

1 个答案: