问题标签 [webpacker]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Rails 5.1 Webpacker – added moment.js via yarn – how to use package in old asset JS
I'm new to webpacker and yarn. I installed successfully the package with:
yarn add moment
EDIT2:
This is my import
Problem: I can't use the "moment" package in my old JS asset files
First works, the other not:
EDIT1:
Here the key points of the installation process of webpacker:
- in gemfile: gem 'webpacker', github: 'rails/webpacker'
- Add this line to assets.rb: Rails.application.config.assets.paths << Rails.root.join('node_modules')
- Add in %head of application.html.haml this: = javascript_pack_tag 'application'
- Restart Rails server and start webpacker
Note: I upgraded my app from Rails 4.2 to 5.0 and later to 5.1; maybe something is missing in my app
ruby-on-rails - Rails 5.1+ Vuejs Webpacker：普通 Rails MVC 与 Rails API
我正在使用 Rails 5.1 和 Vue.js 使用内置的 Webpacker Vue.js 包（通过 --webpack=vue 标志生成）启动一个新应用程序。
我试图了解使用普通 Rails MVC 应用程序与 Rails API 应用程序（使用 --api 标志生成 Rails 应用程序）的优缺点。
鉴于 Rails API 自 2015 年以来已合并到核心中，并且通过 Webpacker gem 内置的 Webpack 是全新的（Rails 5.1，2017），那么构建 Rails 应用程序的最佳方式是什么？成为 Vuejs？或者，主要是 Vuejs？
坚持使用 Webpacker Vue 的常规 Rails，还是使用 Webpacker Vue 的 Rails API？权衡是什么？
其中一些答案将简单地归结为关于全栈 MVC 应用程序与带有 API 的 SPA 应用程序的对话。但是，除了“这是一个全栈 MVC 应用程序与 SPA 应用程序的问题”之外，我是否应该考虑任何特定的 Rails Way +Vue.js 组件工作流程。
我想指出，我意识到答案会有点风格偏好。有些人可能更喜欢其中之一。
两者都可以，但我想考虑一下易用性、兼容性和一种方式与另一种方式的权衡。
谢谢你。
ruby-on-rails - Rails Vuejs Webpacker：传递实例变量数据
我正在尝试学习如何使用通过 Webpacker gem 生成的带有 Vuejs 的 Rails 5.1 构建应用程序。
如何在 Vue 组件之间来回传递实例变量数据，以将我的数据输入/输出数据库？
例如，假设我有一个带有用户名和电子邮件字段的用户模型。是否有一个简单的示例说明如何将实例变量 @user 数据从控制器传递到组件？
我相信有两种方法可以做到这一点：
(1) 在控制器中，render :json => @user使用 fetch API 或 Axios 之类的东西来检索 .vue 组件中的数据。
-或者-
(2) 在视图中使用类似于示例<%= javascript_pack_tag 'hello_vue' %>的<%= content_tag ... %>内容。
当我做这个<%= javascript_pack_tag 'hello_vue' %>例子时，我可以看到“Hello Vue！” 来自组件“消息”变量中的数据，但我无法找到实例变量数据的示例，例如：@user 数据，正在传入和传出 Rails。
任何有关如何传递@user 数据的示例都将不胜感激。
谢谢你。
ruby-on-rails - 如何使用 webpacker gem 访问资产
你能解释一下如何从 vue.js 组件中的 webpacker gem 访问资产吗？例如 - 如何使用背景图像创建 div。我尝试使用 /app/assets/images 和 /app/javascripts/assets 文件夹，但图像仅在模板部分可用，但在样式部分不可用:(
就我而言
工作正常，但是
不工作:(
怎么了？
ruby-on-rails - Rails 5.1 capistrano 卡在 webpacker 编译资产
我正在尝试使用 capistrano 部署 rails 5.1 应用程序，它似乎被困在编译资产：
没有错误，它只是在那里停留了几个小时。如果我检查在远程服务器上执行此操作的节点进程，它说它使用 100% 的 cpu 大约 5 分钟，然后该进程似乎被杀死，但它仍然显示“正在编译资产”。
ruby-on-rails - 将图像从包或资产/图像文件夹加载到 template.html 文件中
我已经尝试了将图像加载到 rails/angular 应用程序中的 template.html 的所有可能方法，但我的方法都不起作用。我导入了我的模板文件 - 从“./template.html”导入模板；这是我的角度组件的样子
这是我尝试过的变体列表。logo.png 保存在 /assets/images/logo.png 中的位置，我还在 packs/img/logo.png 中保存了相同的徽标，只是为了看看哪个最终会起作用。
<img src="/assets/images/logo.png" alt="" />在控制台中收到此错误GET http://localhost:5000/assets/images/logo.png 404 (Not Found)
<img src="<%= asset_pack_path 'logo.png' %>" alt="" />在控制台中收到此错误GET http://localhost:5000/%3C%=%20asset_pack_path%20'logo.png'%20%%3E 404 (Not Found)
<img src="<%= asset_pack_path '/img/logo.png' %>" alt="" />-GET http://localhost:5000/%3C%=%20asset_pack_path%20'img/logo.png'%20%%3E 404 (Not Found)
<img src="<%= image_tag('logo.png') %>" alt="" />-GET http://localhost:5000/%3C%=%20image_tag('logo.png')%20%%3E 404 (Not Found)
我什至也尝试过导入徽标，但出现此错误 -template.html?6163:1 Uncaught Error: Cannot find module "./logo"
我不确定这是否是错误的，但我认为这可能是因为
根据文档，这应该告诉打字稿在遇到 html 文件时不要对它做任何事情。那么既然 typescript 将这个文件中的所有内容都当作一个字符串来处理，那么我们应该如何通过外部模板文件来加载图像呢？
我基本上用完了通过 template.html 文件加载图像的可能方法的变体。
ruby-on-rails-5 - 如何在 Webpacker 中使用 Rails Url 助手/Rails 5.1 中的 React-rails
我正在使用带有react-rails gem 的web-packer来构建一个在线旅游应用程序。我在使用服务器端渲染的 JSX 视图中使用 Rails URL 助手时遇到问题：
例如在我的 jsx 视图中：
运行后出现此错误：
作为一种解决方法，我能想到的是将 search_trips_path 作为道具从我的 Rails 视图传递给组件，或者直接使用 Rails.application.routes.url_helpers 但这非常不方便，尤其是对于那些具有许多链接的 jsx 视图。
我试图查看 web-packer 文档，但似乎 gem 不支持 erb 加载器的 Rails 视图助手。
请帮忙指点！
ps：我已经正确配置了erb webpacker loader。
vue.js - 如何将自定义元标记与 Rails 5 + webpacker + Vue.js 集成
就像标题一样：在使用 Rails 后端 API（随 webpacker 安装）和 Vue 等框架的应用程序中集成 SEO 内容（如 Facebook OpenGraph 标签）的正确方法是什么？
这就是我的一部分的config/routes.rb样子：
目前应用程序的设计方式是，前端部分的所有请求都由vue-router.
我的layouts/application.html样子几乎就像附加的片段一样：
我的问题是，当没有直接访问<head>部分时，管理 Facebook Open Graph 等内容的正确方法是什么？
我不能使用相当默认的 rails 东西，content_for因为一切都发生在脚本中。
或者也许我错了？缺少一些花哨的，重要的东西吗？
如果能得到任何建议，将不胜感激，谢谢。
ruby-on-rails - Webpacker 需要 Node.js >= v6.4 并且您使用的是 v5.4.0
我正在尝试使用以下命令安装 rails webpacker：
rails webpacker：安装
但我得到了错误：Webpacker requires Node.js >= v6.4 and you are using v5.4.0
但是输入nodejs --version 会返回：v8.4.0
jquery - 如何在 Rails webpacker 3 中使用 jQuery
我生成了一个新的 rails 应用程序：
rails new titi --webpack=vue
并想使用 jQuery（或其他库，如 popper、vue-resource ...）。
我试过yarn add jquery哪个很好，但我无法在我的 JavaScript 代码中访问 jQuery。
在以前的 Webpacker gem 中，有更多的 conf 文件，我不得不将其写在shared.js：
在当前 Webpacker 版本中包含库的最简洁方法是什么？里面的东西config/webpacker.yml？