$ rails new <project_name> --webpack=stimulus --database postgresql --skip-coffee --skip-test
$ cd <project_name>
$ bundle
$ rails db:drop db:create
# (Optional) Integrate stimulus manually
$ yarn add stimulus
$ mkdir app/javascript/controllers
$ touch app/javascript/controllers/clipboard_controller.js
# (Optional) Using webpacker for stylesheets
$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss
$ touch app/javascript/stylesheets/_variables.scssIntegrate stimulus: in app/javascript/pack/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
import 'stylesheets/application'
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /\.js$/)
application.load(definitionsFromContext(context))Provide an example for testing in app/javascript/controllers/clipboard_controller.js
import { Controller } from 'stimulus'
export default class extends Controller {
static targets = ['source']
initialize() {
console.log('clipboard initialize')
}
connect() {
console.log('clipboard connect')
if (document.queryCommandSupported('copy')) {
this.element.classList.add('clipboard--supported')
}
}
copy(e) {
e.preventDefault()
this.sourceTarget.select()
document.execCommand('copy')
}
}app/javascript/stylesheets/applicatin.scss
@import 'variables';
@import 'base';app/javascript/stylesheets/_variables.scss
$colors: (
major: #00D252,
minor: #2F3B59
);# https://getbootstrap.com/docs/4.1/getting-started/webpack/
$ yarn add jquery popper.js bootstrapapp/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';app/javascript/pack/application.js
import 'bootstrap'Add configuration to config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
/**
* Automatically load modules instead of having to import or require them everywhere.
* Support by webpack. To get more information:
*
* https://webpack.js.org/plugins/provide-plugin/
* http://j.mp/2JzG1Dm
*/
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment# https://webpack.js.org/loaders/expose-loader/
$ yarn add expose-loader -DAdd configuration to config/webpack/environment.js
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
})