如何使用 Webpacker 导入 node_modules答案

【问题标题】：How to Import node_modules with Webpacker如何使用 Webpacker 导入 node_modules
【发布时间】：2019-04-06 15:20:20
【问题描述】：

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

我正在尝试包含和使用 Animate On Scroll Library。

我已安装并运行 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 包时，什么也没有发生。我错过了什么？

谢谢。

【问题讨论】：

js控制台有错误吗？

标签： ruby-on-rails yarnpkg webpacker

【解决方案1】：

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

我最近学习的几点有助于更好地理解 webpacker/css/sprockets...

首先，assets 文件夹中的 CSS 在 webpack 之外。是链轮。这不是问题，但经常将两者混合会带来挑战。

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

第二，AOS是通过yarn添加的还是gem？带有 webpack 的 Gems 可能有点棘手。我和我遇到的其他人放弃了尝试在 webpack 中使用 gem 资产。最好坚持使用 webpack 的 yarn/npm 模块。否则，将所有资产移入 sprockets 管道（即在assets/ 文件夹中）并将其用于您网站的这一部分。（可以混合使用，分开放置即可）。

第三，如果AOS模块是通过yarn add ...添加的（即它驻留在nodule_modules目录中）然后尝试将CSS导入替换为just

@import '~aos';

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

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

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

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

祝你好运！它变得更容易，yarn/webpack 很酷，比旧的 ruby-gems-for-front-end-components 更好，IMO

【讨论】：