Skip to content

Instantly share code, notes, and snippets.

@ismailmechbal

ismailmechbal/rails_webpacker_bootstrap_expose_jquery.md

Forked from andyyou/rails_webpacker_bootstrap_expose_jquery.md
Created March 24, 2019 06:09
Show Gist options
  • Save ismailmechbal/9c04d37b720291941a71320f5ddb540c to your computer and use it in GitHub Desktop.
Save ismailmechbal/9c04d37b720291941a71320f5ddb540c to your computer and use it in GitHub Desktop.
Download ZIP
Rails 5.2 with webpacker, bootstrap, stimulus starter
Raw
gistfile1.txt
# Rails 起手式
```bash
$ 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.scss
```
Integrate **stimulus**: in **app/javascript/pack/application.js**
```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**
```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**
```scss
@import 'variables';
@import 'base';
```
**app/javascript/stylesheets/_variables.scss**
```scss
$colors: (
major: #00D252,
minor: #2F3B59
);
```
## Install bootstrap
```bash
# https://getbootstrap.com/docs/4.1/getting-started/webpack/
$ yarn add jquery popper.js bootstrap
```
**app/javascript/stylesheets/application.scss**
```scss
@import '~bootstrap/scss/bootstrap';
```
**app/javascript/pack/application.js**
```js
import 'bootstrap'
```
Add configuration to **config/webpack/environment.js**
```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
```
## expose jQuery to global for views
```bash
# https://webpack.js.org/loaders/expose-loader/
$ yarn add expose-loader -D
```
Add configuration to **config/webpack/environment.js**
```js
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
})
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment