I generate a new rails app :
rails new titi --webpack=vue
and would like to use jQuery (or other libs like popper, vue-resource...).
I tried to yarn add jquery
which was fine, but I don't have access to jQuery in my JavaScript code.
In previous Webpacker gem, there was much more conf and I had to write this in shared.js
:
module.exports = {
...
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
]
...
resolve: {
extensions: settings.extensions,
modules: [
resolve(settings.source_path),
'node_modules'
],
alias: {
jquery: "jquery/src/jquery",
vue: "vue/dist/vue.js",
vue_resource: "vue-resource/dist/vue-resource",
}
}
What is the cleanest way to include libraries in current Webpacker version ? Something in config/webpacker.yml
?
Updated for Webpacker 3.5.0 and [email protected]
Popper.js
and [email protected]
aren't required to install JQuery. However, Bootstrap 4 requires both JQuery and Popper.js, and I assume that is the point of showing them in the original example. Also, I omitted Vue from my example as there is ample documentation on how to add the Vue connections.
To get everything to work, I installed webpack-merge
, popper.js
, jquery
, jquery-ujs
, and [email protected]
via Yarn.
Once installed, I was able to update ./config/webpack/environment.js
with the following code:
/*
./config/webpack/environment.js
Info for this file can be found
github.com/rails/webpacker/blob/master/docs/webpack.md
*/
const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')
const webpack = require('webpack')
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
$: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'window.Tether': "tether",
Popper: ['popper.js', 'default'], // for Bootstrap 4
})
)
const envConfig = module.exports = environment
const aliasConfig = module.exports = {
resolve: {
alias: {
jquery: 'jquery/src/jquery'
}
}
}
module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)
Now that envConfig.toWebpackConfig()
is used in the last statement in environment.js
, I needed to change development.js
, production.js
, test.js
to the following:
const environment = require('./environment')
module.exports = environment
Then in ./app/javascript/application.js
I added the following:
// ./app/javascript/application.js
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"
To make sure JQuery wasn't being loaded via the asset pipeline, I removed the Rails assets connection in ./app/assets/javascripts/application.js
:
// require rails-ujs
// require_tree .
I then added these two lines to the header
section in ./app/views/layouts/application.html.haml
to display the Webpack content:
= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application'
After making a static_pages
controller and static_pages#index
view, after starting the Rails server (rails s
), I was able to go to my browser's JS console and run console.log(jQuery().jquery);
to see if JQuery was loading. Everything loaded as expected.
Documentation can be found here: https://github.com/rails/webpacker/blob/master/docs/webpack.md