Good bye sprockets!
...almost
But what's wrong with it?
- no module system - import everything in single file and order of 'require' matters!!
- built for rails, not for javascript
Webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets.
https://webpack.js.org/
Webpacker
- let javascript tool deal with javascript
- manage javascript dependencies with package manager (yarn / npm)
- better code organization with module system
- built-in support for css/sass/scss, fonts and images
- live-reload server for javascript
- highly configurable
Gem wrapper for webpack - https://github.com/rails/webpacker
Webpacker
// Gemfile
gem 'webpacker', '~> 3.0'// you can add foreman and craete Procfile for this
bundle exec rails s
./bin/webpack-dev-server --inline true --hot false// create webpack config files
./bin/rails webpacker:install// add pack to layout
// name has to match with pack name
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>Own modules - sprockets
// application.js - manifest
// require api.js
// require postsIndex.js
// postsIndex.js
window.myApp = window.myApp || {};
function postsIndex() {
myApp.api.fetchPosts(); // access api module
// do stuff required on posts index view
}
window.myApp.postsIndex = postsIndex; // register view module in global scope
// api.js
window.myApp = window.myApp || {};
const apiMethods = {
fetchPosts: () {
// fetch posts logic here
}
}
window.myApp.api = apiMethods; // register api module in global scope
// application.js - root application file
import postsIndex from './posts/postsIndex';
window.myApp = {
postsIndex: postsIndex
};
// posts/postsIndex.js
import api from './api';
function postsIndex() {
api.fetchPosts(); // access api module
// do stuff required on posts index view
}
export default postsIndex;
// api.js
const apiMethods = {
fetchPosts: () {
// fetch posts logic here
}
};
export default apiMethods;
Own modules - webpacker
Using jQuery & Bootstrap
// install jquery with package manager
yarn add jquery
// config/webpack/shared.js
// add jquery to global scope for webpack build
module.exports = {
...
plugins: [
...
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
jquery: "jquery",
}),
]
...
};
Using jQuery & Bootstrap
// install bootstrap with package manager
yarn add bootstrap
// main.js
// import all required dependencies
// bootstrap
import "bootstrap/dist/js/bootstrap.js";
import "bootstrap/dist/css/bootstrap.css";
// bootstrap-datetimepicker
import "eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js";
import "eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
/***** NOTE ******/
You may need to dig through node_modules/
and lib directory to find what file you need to importWhere to put my code?
- assets used inside rails views stays inside app/assets/images
- all javascript code goes to app/javascript
- root files (manifests) goes to packs/
- other files needs to be placed outside of packs/
Production build
Webpacker hooks up a new webpacker:compile task to assets:precompile, which gets run whenever you run assets:precompile
deck
By vrael560
