标签: webpacker

我意识到在Rails引擎中使用webpacker存在争议,但我有一个简单的用例,目前有一个解决方法.想知道一个更好的(最好的？)解决方案.

在这个rails引擎中,我在"spec/dummy"目录中设置了webpacker,一切都在dev中运行良好:https: //github.com/RealEstateWebTools/property_web_scraper/tree/master/spec/dummy/config/webpack

当rails应用程序使用该引擎时,它将找不到已编译的webpack文件,因此每次我准备好发布时,我都会编译webpack文件并手动将它们复制到供应商目录:https: //github.com/RealEstateWebTools/ property_web_scraper /树/主/供应商/资产/ JavaScript的

然后我在这里要求该文件:https: //github.com/RealEstateWebTools/property_web_scraper/blob/master/app/assets/javascripts/property_web_scraper/spp_vuetify.js

在我的布局中,我使用上面的文件使用旧的链轮"javascript_include_tag":https://github.com/RealEstateWebTools/property_web_scraper/blob/master/app/views/layouts/property_web_scraper/spp_vuetify.html.erb

在布局中有一个检查,看看我是否正在运行"spec/dummy"应用程序,在这种情况下,我将使用webpacker,因为它通常在dev中使用.

必须有比这更好的方法.

我目前正在尝试使用webpack.ProvidePlugin,但似乎没有正确加载它.这是我的environment.js

var webpack = require("webpack");

const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");

environment.loaders.append("vue", vueLoader);

environment.plugins.append(
  "Provide", // arbitrary name
  new webpack.ProvidePlugin({
    Vue: "vue",
    _: "lodash"
  })
);

module.exports = environment;

和我的档案 Header.vue

<h1>{{_.capitalize(title)}} </h1>

错误:

vue.runtime.esm.js:587 [Vue warn]: Property or method "_" is not defined on
 the instance but referenced during render. Make sure that this property is 
reactive, either in the data option, or for class-based components, by 
initializing the property. 

我知道它很简单，但是随着rails 6的更新。rails6中有新的语法来管理由webpacker维护的javascript资产。

//application.js
require("@rails/ujs") //.start()
require("turbolinks").start()
require("@rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

我能够添加，custom/custom但引导程序和jquery无法正常工作我已经通过npm安装了jquery和引导程序

我正在使用Webpacker为 Rails 应用程序构建资产。我想为来自 3rd 方 CSS 框架的所有类名添加自定义前缀。例如，来自Bulma的样式应该转换为bulma_button用作选择器，而不仅仅是button.

postcss-prefixer是一个 PostCSS 插件，似乎可以像我想要的那样向样式表添加自定义前缀。但是，我仍然需要使它仅作为来自特定 NPM 包的类的前缀。

这就是我在为 3rd 方样式添加前缀的路径上卡住的地方：如何将 PostCSS 插件仅应用于某个node_modules目录并将结果导入到我的入口点样式表中？我试图打破了由Webpacker提供的装载机管道和操纵test/ include/exclude的WebPack配置值，但似乎我只能成功的影响是被编译包括我的风格，我不希望前缀整个样式表。

任何有关特定 PostCSS 插件问题的帮助或为第 3 方 CSS 加上前缀的总体目标表示赞赏。如果认为有用，我将链接到示例应用程序。

我有一个javascript文件(something_controller.js.erb;技术上是Stimulus,但我认为不重要)我想在其中包含部分内容作为后续附加的HTML.

我使用Webpacker启用了对ERB的支持,但是调用<%= render partial: 'shared/condition' %>不起作用.它只是悄悄地无法生成.js文件并包含它.

此代码不起作用:

const html = `<%= ApplicationController.renderer.render partial: 'shared/condition' %>`

但是,这不是渲染器.渲染错误,因为这有效:

const html = `<%= ApplicationController.renderer.render inline: 'something' %>`

shared/_condition.html.erb的内容并不奇怪,并且没有变量:

<div data-controller='condition'>
  <a href='#' data-action='condition#remove'><i class="fas fa-trash-alt"></i></a>
  <a href='#' data-toggle="popover" data-target='condition.item' data-action='condition#doNothing'>Item</a>
  <a href='#' data-toggle="popover" data-target='condition.value' data-action='condition#doNothing'>Value</a>
</div>

我已经尝试了我能想到的路径的每个组合:app/views/shared/condition,/ app/views/shared/condition,带有_,带有.html.erb.我已经试过渲染template:和file:...我难倒.

半相关:有什么地方我可以看到产生的任何错误？日志显示编译通常成功,但是没有生成简单的控制器.我找不到任何明显的错误日志.

ETA:在development.log中,出现:

[Webpacker] Compiling…
  Rendered shared/_condition.html.erb (36.1ms)
[Webpacker] Compiled all packs in /Users/timsullivan/dev/thing/public/packs

...所以它似乎渲染部分,但something_controller.js文件未包含在组合的application.js中:

为了在某​​处找到错误,我尝试运行:

timsullivan$ rails assets:precompile
yarn install v1.6.0
(node:45691) [DEP0005] DeprecationWarning: Buffer() is deprecated …

我正在尝试将 Webpacker 集成到我正在开发的 Rails 4 应用程序中。我已将 gem 添加到 Gemfile 并运行指令以设置使用 Webpacker 和 Vue.js 的所有内容。资产在开发中编译得很好，但是当我将其推送到我们的 CI 管道时，我看到 CircleCI 返回以下错误：

ActionView::Template::Error:         ActionView::Template::Error: Webpacker can't find application in /home/circleci/app/public/packs-test/manifest.json. Possible causes:
  1. You want to set webpacker.yml value of compile to true for your environment
  unless you are using the `webpack -w` or the webpack-dev-server.
  2. webpack has not yet re-run to reflect updates.
  3. You have misconfigured Webpacker's config/webpacker.yml file.
  4. Your webpack configuration is not creating a manifest.
  Your manifest contains: …

我正在尝试配置 Webpacker 以使用 Rails 引擎。我特别感兴趣的是人们如何设置webpacker.yml他们的引擎资产到主应用程序的/public/文件夹。

首先，我遵循了在 Rails Engines 中使用的 Webpacker 说明。然而，步骤 7 难倒了我。这里的想法是将 设置public_root_path为您的应用程序的/public文件夹。我显然可以在我的个人机器上硬编码正确的路径，但这对于生产或其他开发人员来说是不可持续的。我也不能依赖 ERB来获得动态路径。

我还尝试了步骤 7 中涉及中间件的第二个选项，但它似乎没有任何效果。

我最终希望能够将引擎中的 JavaScript 从app/javascript/packs/application.js文件导入到主应用程序中。如何让 Webpacker在不硬编码路径的情况下从引擎中查找文件？

我有一个 Rails 6 应用程序，它成功部署到 Heroku 并在 localhost:3000 上工作。

我通过yarn和webpack添加了tailwindcss。它在 localhost 上运行得很好，但不能在 heroku 上运行。当我运行时heroku logs出现以下错误

我已经阅读了所有 Heroku Rails 6 Webpacker 问题，并尝试了所有建议。没有任何效果。

1. 我已经注释掉了<%= stylesheet_pack_tag %>......没有帮助
2. 我已经extract_css: true在 webpacker.yml 文件中切换了......没有帮助
3. 我跑了
   • heroku buildpacks:clear
   • heroku buildpacks:set heroku/nodejs
   • heroku buildpacks:add heroku/ruby ...没有帮助

有谁知道发生了什么？

我的 github 仓库是https://github.com/HundredBillion/enneagram

我有一个使用--webpack=stimulus. Docker化了整个事情。使用stimulusjs 没有问题 -import { Application } from "stimulus"就像它应该的那样工作。

然后我添加了 turbolinks ，然后添加了 github README 中描述yarn add turbolinks的import Turbolinks from "turbolinks"类似内容（如果我使用import或 则无关紧要require）。然后导致“编译失败”。错误。不知何故它找不到模块。我有同样的问题，例如另一个名为“isotope-layout”的包。

这是错误日志：Gist

当我ls node_modules在 webpacker docker 容器上时，turbolinks 和 isotope-layout 文件夹就在那里。

? docker-compose run webpacker bash

bash-5.0$ pwd
/home/deploy/app

bash-5.0$ ls node_modules/turbolinks/
CHANGELOG.md  README.md     package.json
LICENSE       dist          src

编辑：docker-compose down --remove-orphans在 node_modules 中触发turbolinks 和其他模块后找到并编译...缓存问题？

这是我当前的 Webpacker 和 Docker 配置文件：

Dockerfile：

FROM ruby:2.6.5-alpine …

我在 Rails 中使用 webpacker，现在正在安装 taildwindcss。他们的安装指南说，@import如果我使用postcss-import. 我必须说，每当我必须使用 webpacker 将 CSS 导入 Rails 时，我都会感到困惑，所以我有几个问题：

1)@import文档中的方法 - 它是 JavaScript 还是 CSS 导入方法？

2）如果它是一个 CSS 方法，为什么我必须将它粘贴到 javascript 文件夹中（例如javascript/stylesheets？我试图将它放在 application.css 文件中，但它不起作用。我认为它与它是使用 PostCSS 并且包是通过纱线安装的？

3）如果上述情况属实，是否意味着如果通过yarn安装，我必须以这种方式导入每个CSS包？