Ruby on Rails অ্যাপ্লিকেশনে Asset Management হল CSS, JavaScript, এবং অন্যান্য ফাইল যেমন ইমেজ বা ফন্টের লোড এবং অপটিমাইজেশনের প্রক্রিয়া। Rails 5.1 থেকে Webpack এবং Yarn এর মাধ্যমে এই অ্যাসেট ম্যানেজমেন্ট আরো শক্তিশালী এবং আধুনিক করা হয়েছে। Webpack এবং Yarn ব্যবহার করে অ্যাসেট প্যাকেজিং, লোডিং এবং ডিপেন্ডেন্সি ম্যানেজমেন্ট করা হয়।
1. Webpack কি?
Webpack একটি জনপ্রিয় JavaScript অ্যাসেট বান্ডলার, যা মূলত JavaScript, CSS, ইমেজ এবং অন্যান্য ফাইলগুলোকে প্যাকেজ করে। এটি JavaScript কোড, স্টাইলশিট, ইমেজ, এবং ফন্ট একসাথে প্যাকেজ করে এবং এক্সটার্নাল ফাইলগুলোকে একত্রে ম্যানেজ করতে সাহায্য করে। Rails 6 থেকে, Webpacker gem ব্যবহার করে Webpack ব্যবহৃত হয়।
2. Webpacker ইনস্টলেশন
Rails 6 এবং তার পরবর্তী সংস্করণগুলোতে Webpack ব্যবহারের জন্য Webpacker gem স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত থাকে। তবে, যদি আপনি Rails 5.2 বা তার পূর্বের সংস্করণ ব্যবহার করেন, তবে আপনাকে এই gemটি manually ইনস্টল করতে হবে।
Webpacker ইনস্টলেশন:
প্রথমে Gemfile এ Webpacker gem যুক্ত করুন:
gem 'webpacker'তারপর, কমান্ড লাইনে এটি ইনস্টল করুন:
bundle installWebpacker gem ইনস্টল করার পর, Webpack সেটআপ করার জন্য কমান্ডটি চালান:
rails webpacker:install
এটি Webpack এবং JavaScript ফাইলগুলো ম্যানেজ করার জন্য প্রাথমিক কনফিগারেশন তৈরি করবে।
3. Yarn কি?
Yarn হল একটি JavaScript প্যাকেজ ম্যানেজার, যা Node.js প্যাকেজগুলো পরিচালনা করার জন্য ব্যবহৃত হয়। Rails অ্যাসেট ম্যানেজমেন্টের জন্য Yarn ব্যবহৃত হয় ডিপেন্ডেন্সি ম্যানেজমেন্টের উদ্দেশ্যে। এটি Node.js প্যাকেজ ইনস্টল করতে, আপডেট করতে এবং ম্যানেজ করতে সাহায্য করে।
Yarn ইনস্টলেশন
Yarn ইনস্টল করার জন্য আপনি অফিসিয়াল ওয়েবসাইট বা npm ব্যবহার করে ইনস্টল করতে পারেন। যদি আপনি npm ব্যবহার করেন:
npm install -g yarn
4. Asset ফাইল স্ট্রাকচার
Rails 6 এর মধ্যে, অ্যাসেট ফাইলগুলো সাধারণত app/javascript ফোল্ডারে থাকে। Webpack ফোল্ডারে থাকা ফাইলগুলোকে JavaScript এবং CSS অ্যাসেট হিসেবে প্যাকেজ এবং কম্পাইল করা হয়।
ফোল্ডার স্ট্রাকচার:
app/
javascript/
packs/ # Webpack প্যাকেজ ফাইল
application.js # এন্ট্রি পয়েন্ট (যেখানে সারা অ্যাসেট প্যাকেজিং শুরু হয়)
stylesheets/ # স্টাইলশিট ফোল্ডার
application.scss
5. Webpack ব্যবহার করে JavaScript অ্যাসেট ম্যানেজমেন্ট
Rails অ্যাপ্লিকেশনে JavaScript এবং CSS ফাইল ম্যানেজ করতে Webpack ব্যবহার করা হয়। Webpack এর মাধ্যমে আপনি JavaScript ফাইলগুলো প্যাকেজ করতে পারেন এবং এগুলোকে এক্সটার্নাল বা কোডস্প্লিটিংয়ের মাধ্যমে লোড করতে পারেন।
JavaScript ফাইল ইনক্লুড করা:
Rails 6-এ JavaScript অ্যাসেটগুলো app/javascript/packs ফোল্ডারে থাকে। আপনি JavaScript ফাইল তৈরি করতে এবং এক্সপোর্ট করতে পারবেন।
// app/javascript/packs/application.js
import "stylesheets/application"
import "bootstrap"
এখানে import "stylesheets/application" একটি SCSS বা CSS ফাইলকে অ্যাসোসিয়েট করবে এবং import "bootstrap" বুটস্ট্র্যাপ লাইব্রেরি যুক্ত করবে।
6. CSS এবং SCSS ব্যবহার
Rails 6 এবং Webpacker ব্যবহার করে SCSS ফাইলগুলোকে JavaScript এর মাধ্যমে একত্রিত করা হয়। SCSS ফাইলগুলোকে Webpack এর মাধ্যমে বিল্ড করা হয়।
SCSS ফাইল ইনক্লুড করা:
প্রথমে, app/javascript/stylesheets/application.scss ফাইল তৈরি করুন এবং এতে আপনার SCSS কোড লিখুন:
// app/javascript/stylesheets/application.scss
@import "bootstrap";
এখন, এই SCSS ফাইলটি আপনার application.js ফাইলে ইম্পোর্ট করুন:
// app/javascript/packs/application.js
import "stylesheets/application"
এটি Webpack এর মাধ্যমে SCSS ফাইলকে কম্পাইল করবে এবং CSS ফাইলটি অ্যাসেট হিসেবে সার্ভারে লোড করবে।
7. Yarn দিয়ে প্যাকেজ ইনস্টল করা
JavaScript প্যাকেজ ম্যানেজ করতে Yarn ব্যবহৃত হয়। আপনি Yarn ব্যবহার করে JavaScript লাইব্রেরি ইনস্টল করতে পারেন।
উদাহরণ: Bootstrap ইনস্টল করা
Bootstrap ইনস্টল করতে Yarn ব্যবহার করুন:
yarn add bootstrap
এটি node_modules ফোল্ডারে Bootstrap প্যাকেজ ইনস্টল করবে। এরপর, আপনার JavaScript ফাইলে এটি ইম্পোর্ট করুন:
// app/javascript/packs/application.js
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
এভাবে, Bootstrap এর CSS এবং JavaScript ফাইল আপনার অ্যাসেট হিসেবে প্যাকেজ করা হবে।
8. Webpack সাস্পেনশন এবং ডিপ্লয়মেন্ট
প্রোডাকশন পরিবেশে অ্যাসেট ম্যানেজমেন্ট করতে হলে, আপনি Webpack এবং Yarn এর সাহায্যে অ্যাসেট কম্পাইল এবং মিনিফাই করতে পারেন।
প্রোডাকশনে অ্যাসেট কম্পাইল:
RAILS_ENV=production bin/rails assets:precompile
এটি আপনার JavaScript এবং CSS ফাইলগুলো মিনিফাইড এবং প্যাকেজ করে, প্রোডাকশন পরিবেশে প্রস্তুত করবে।
সারমর্ম
Ruby on Rails-এ Webpack এবং Yarn ব্যবহার করে অ্যাসেট ম্যানেজমেন্ট হল একটি আধুনিক এবং কার্যকরী উপায়। Webpacker gem Rails অ্যাপ্লিকেশনে Webpack কে ইন্টিগ্রেট করে এবং Yarn প্যাকেজ ম্যানেজার JavaScript লাইব্রেরি এবং ডিপেন্ডেন্সি ম্যানেজ করতে সহায়তা করে। এই পদ্ধতিতে আপনি JavaScript, CSS, এবং অন্যান্য ফাইলগুলো প্যাকেজ, মিনিফাই, এবং অপটিমাইজ করতে পারেন। Webpack এবং Yarn এর সাহায্যে অ্যাসেট ম্যানেজমেন্ট আরো শক্তিশালী এবং কাস্টমাইজেবল হয়ে ওঠে।
Read more
