Rails６でJQeuryパッケージを使ってリンクプレビュー

Question

mini-previewでリンク先のコンテンツをプレビュー表示する

上記サイト参考に

yarnを使ってjQueryを導入する

yarn add jquery

実行後、node_modulesというディレクトリ中にjqueryにファイル。

Webpackの設定 config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

mini-preview導入

jquery.minipreview.cssをapp/stylesheetsに配置
jquery.minipreview.jsをapp/javascript/packs配置

jQueryを読み込む app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery.minipreview.js")

layouts/application.html.erb

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

呼び出したいhtmlファイル内

<%= link_to 'teratail', 'https://teratail.com/', class: 'URL' %>

<script>
  $('a').miniPreview({
    width: 256,
    height: 144,
    scale: .25,
    prefetch: 'pageload'
  });
</script>

ここまではやったのですが、プレビューできません。

どこが間違っているか教えて頂けると幸いです。

Answer 1

app/javascript内に

jquery.minipreview.jsを

app/javascript/packs/application.js内に

require("../jquery.minipreview.js")

で表示出来ました。