環境
Rails 6.0.3
Ruby 2.6.6
導入
WebpackのProvidePluginを利用することでreqireを明示することなくどこでもjQueryを使用することが可能になります。
###jQueryをインストール
$ yarn add jquery
###plugin用のファイルの作成
config/webpack/plugins/provide.js
const webpack = require('webpack')
module.exports = new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery'
});
###webpackの設定リストに先ほどのプラグインを追加する
特定の環境でしか使用しないのであればenviroment.jsではなくtest.js,development.jsなどに記述する。
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// 編集開始
const provide = require('./plugins/provide')
environment.plugins.prepend('provide', provide)
// ここまで編集
module.exports = environment
これでrequireを記述せずともjsファイル内でjQueryが使用可能となります。
試しに、
app/javascript/packs/hello.js
$(function() {
console.log("hello");
});
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
.
.
.
<%= javascript_pack_tag 'hello', 'data-turbolinks-track': 'reload' %>
.
.
</head>
</html>
これでjQueryが使用できていることがわかります。