我正在尝试添加简单的 controller 以查看在 ruby 导轨中使用 preact 组件

Question

我正在尝试添加简单的 controller 以查看在 ruby 导轨中使用 preact 组件。 它只是显示 hello world 只是一个基本程序，只是试图在 rails 中使用 preact 组件。

没有太多可尝试的东西我已经搜索了很长时间，但没有运气。 我正在关注此https://github.com/UseHover/preact-rails来执行此操作。

应用程序.html.erb

   <title>Helloworld</title>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= yield %>
   <%= javascript_pack_tag 'application' %>
  </body>

我调用组件的视图。

<%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>

Package.json

{
   "name": "helloworld",
   "private": true,
   "dependencies": {
   "@rails/webpacker": "^4.0.7",
   "preact": "^8.5.2",
   "preact_ujs": "^0.1.1"
  },
   "devDependencies": {
   "webpack-dev-server": "^3.8.1"
 }

}

错误：-

Webpacker 在 D:/Projects/Ruby Project/helloworld/public/packs/manifest.json 中找不到应用程序。 可能的原因：

您想为您的环境将 compile 的 webpacker.yml 值设置为 true
除非您使用的是webpack -w或 webpack-dev-server。
webpack 尚未重新运行以反映更新。
你错误地配置了 Webpacker 的 config/webpacker.yml 文件。
您的 webpack 配置未创建清单。

您的清单包含：

{
}
Extracted source (around line #10):


  <body>
  <%= yield %>
  <%= javascript_pack_tag 'application' %>

  </body>
  </html>

Answer 1

尝试使用 Preact 10 而不是 8。preact-rails 在他们的文档中似乎使用了 10。

Answer 2

使用 CDN 可以轻松完成。

<h1>Render by Preact client library using h and render function</h1>
<div id="preact">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.5.2/preact.dev.js"> 
</script>

<script>
 var Component = window.preact.Component,
 h = window.preact.h,
 render = window.preact.render;

 var PreactApp = function (props){
 return h('h1',
 {className: ''},
 'Hello world!');
  }

 render(PreactApp(),document.getElementById("preact"));
 </script>

我正在尝试添加简单的 controller 以查看在 ruby 导轨中使用 preact 组件

问题描述

2 个解决方案

解决方案1
1 2019-10-01 22:06:28

解决方案2
0 2019-11-14 07:40:09

我正在尝试添加简单的 controller 以查看在 ruby 导轨中使用 preact 组件

问题描述

2 个解决方案

解决方案1 1 2019-10-01 22:06:28

解决方案2 0 2019-11-14 07:40:09

解决方案1
1 2019-10-01 22:06:28

解决方案2
0 2019-11-14 07:40:09