我正在嘗試添加簡單的 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