Χρησιμοποιώντας webpack σε Ruby on Rails
Στο ραγδαία μεταβαλλόμενο οικοσύστημα του web, ένα σημαντικό χαρακτηριστικό που έλειπε από το Rails framework ήταν η δυνατότητα να υποστηρίξει ένα μοντέρνο σύστημα δόμησης javascript. Με την κυκλοφορία της Rails 5.1, αυτό αλλάζει με την προσθήκη του webpacker gem στην αλυσίδα εργαλείων του.
Οι τελευταίες εκδόσεις έρχονται προεγκατεστημένες με webpack και yarn, μέσω της επιλογής --webpack κατά την δημιουργία νέας εφαρμογής, προσφέροντας εύκολη ενσωμάτωση με διάσημα front-end frameworks όπως React, Angular, Vue και Elm.
Εγκατάσταση
Προσθέστε τη γραμμή gem 'webpacker', '~> 2.0' στο Gemfile σας, και τρέξτε bundle.
Αφού προστεθεί, μπορείτε να το εγκαταστήσετε με τις εξής εντολές :
rails webpacker:install
rails webpacker:install:[react, angular, vue, elm] (προαιρετικά)
Αυτό θα δημιουργήσει τα εξής αρχεία:
config/webpack/*, config/webpacker.yml # webpack configuration
bin/webpack, bin/webpack-dev-server # webpack scripts
package.json, yarn.lock # πακέτα npm & επιλογές εκδόσεων
.postcssrc.yml, .babelrc # επιλογές μεταγλωτιστών,
app/javascript/packs/application.js # παράδειγμα js module
Επίσης θα προστεθούν οι εξής γραμμές στο .gitignore:
/public/packs
/node_modules
Ο installer θα εγκαταστήσει επίσης, όλες τις απαραίτητες βιβλιοθήκες JavaScript που είναι απαραίτητες για να τρέξει σωστά το πρόγραμμα.
Διαχείρηση πολλαπλών διεργασιών
Για να μπορούμε να τρέξουμε παράλληλα rails server και webpack, πρέπει να εγκαταστήσουμε το foreman:
gem install foreman
Δημιουργούμε ένα αρχείο με όνoμα Procfile, που θα χρησιμοποιεί το foreman, με τα εξής περιεχόμενα:
server: rails s
client: ./bin/webpack-dev-server
Τέλος φτιάχνουμε ένα executable αρχείο μέσα στον φάκελο /bin, δίνοντας του ένα όνομα της επιλογής μας, το οποίο τρέχει το foreman:
echo 'foreman start -f Procfile' >> bin/watch
chmod +x bin/watch
Δίνοντας τώρα την εντολή bin/watch, στην κονσόλα μας, θα δούμε να τρέχουν παράλληλα οι backend και frontend servers. Πρέπει απλά να προσθέσουμε ένα <%= javascript_pack_tag 'application' %> σε ένα view, πχ στο app/views/layout/application.html.erb, και θα δούμε στην κονσόλα του browser ένα μήνυμα να μας καλωσορίζει στον κόσμο του webpacker!
Πηγές και περισσότερες πληροφορίες: