如何使用 Webpacker 导入 node_modules [英] How to Import node_modules with Webpacker

问题描述

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

I'm new to the whole JS/webpacker game and am failing to understand how to import and use a javascript package using webpacker.

我正在尝试包含和使用 Animate On Scroll 库.

I am trying to include and use the Animate On Scroll Library.

我已经安装并运行了 Webpacker(我知道它正在运行，因为我能够愉快地使用 StimulusJs).

I have Webpacker installed and working (I know it's working because I am able to happily use StimulusJs).

这是我的/javascript/packs/application.js 文件的样子:

Here's what my /javascript/packs/application.js file looks like:

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 %>

I have my javascript_pack_tag included on my application.html.erb as <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

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

I imported the required css files using my /assets/css/application.scss with @import 'aos/dist/aos'; so that shouldn't be the issue.

当我尝试通过执行类似<h1 class="text-center" data-aos="fade-in">这是一个标题.</h1> 什么也没发生.我错过了什么?

When I try and use the AOS package by doing something like <h1 class="text-center" data-aos="fade-in">This is a header.</h1> nothing happens. What am I missing?

谢谢.

推荐答案

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

Upon reading this again I guess it's more a JS issue you are encountering. I'll leave my points about the CSS below in case useful. See the fourth point about webpack-dev-server if you aren't using it already. Does your browser support defer? You could try moving the scripts to right before </body> to see. I'd probably just cut-to-the-chase and set a javascript breakpoint in AOS.init() and see what's happening.

我最近倾向于帮助更好地理解 webpacker/css/sprockets 的几点...

A few points I've leaned recently to help better understand webpacker/css/sprockets...

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

First, the CSS in the assets folder is outside of webpack. It's sprockets. That's not a problem but often mixing the two presents challenges.

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

At the very least you'll need a stylesheet_link_tag 'application'... in addition to the pack tags.

第二，AOS是通过yarn添加的还是Gem?使用 webpack 的 Gems 可能有点棘手.我和我遇到的其他人放弃了在 webpack 中使用 gem 资产的尝试.最好坚持使用 webpack 的 yarn/npm 模块.否则，将所有资产移动到 sprockets 管道(即在 assets/ 文件夹中)并将其用于站点的这一部分.(可以混合使用，只需将它们分开即可).

Second, is AOS added via yarn or is it a gem? Gems with webpack can be a bit tricky. I and others I encountered gave up trying to use gem assets in webpack. Best to stick to yarn/npm modules for webpack. Otherwise, move all the assets into the sprockets pipeline (ie in the assets/ folder) and use that for this portion of your site. (it's ok to mix them, just keep them separate).

第三，如果 AOS 模块是通过 yarn add ... 添加的(即它位于 nodule_modules 目录中)然后尝试替换CSS 导入只是

Third, if the AOS module is added via yarn add ... (ie it resides in the nodule_modules directory) then try replacing the CSS import to just

@import '~aos';

这是有效的，因为 node_modules 在搜索路径中，并且如果插件文件夹有一个 package.json 清单并且它包含一个样式"条目，它从那里拉出 css 文件路径.

This works because node_modules is in the search path and if the plugin folder has a package.json manifest and it includes a "style" entry, it pulls the css file path from there.

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

Third, you can try moving the CSS to webpack. Try this...

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

1. Make an application.scss file in your components subfolder
2. Add to your packs/application.js file: import '../components/application.scss
3. Add a stylesheet_pack_tag 'application' .... to your layout
4. Put your css imports (from node modules) in your new application.scss

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

Fourth: Use bin/webpack-dev-server. This compiles webpack on the fly whenever any of your source files changes instead of on every page load (saves you a lot time). Since your CSS is now under webpack, it will give you errors if the import isn't right (though sprockets should do this too in your server logs).

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

Good luck! It gets easier and yarn/webpack is cool, better than the old ruby-gems-for-front-end-components, IMO

这篇关于如何使用 Webpacker 导入 node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！