Trong quy trình phát triển Laravel tiêu chuẩn (từ Laravel 9 trở đi và hiện tại là Laravel 13), vị trí đặt các file .js và .css do developer tự viết được phân chia rõ ràng theo mục đích sử dụng:
1. Nơi chứa mã nguồn (Source Code) — Phổ biến nhất
Tất cả các file JS/CSS do developer tự định nghĩa, chưa qua đóng gói/biên dịch sẽ đặt tại thư mục resources/
my-laravel-project/
├── resources/
│ ├── css/
│ │ ├── app.css # File CSS chính
│ │ └── custom.css # CSS tự định nghĩa thêm
│ └── js/
│ ├── app.js # File JS chính (entry point)
│ ├── components/ # Chứa các module JS/Vue/React
│ └── custom.js # JS tự viếtVì sao đặt ở resources/?
Tài liệu Official (Trang chủ Laravel) quy định resources/css và resources/js là nơi lưu trữ tất cả frontend assets.
Các file này sẽ được Vite (công cụ đóng gói mặc định) đọc, nén, tối ưu hóa (bundle/minify) và tạo mã hash để chống cache trình duyệt trước khi phát hành (production).
Cách liên kết vào Blade Layout:
Trình biên dịch Vite sẽ biên dịch các file từ resources/ và nhúng vào HTML thông qua directive @vite():
<!-- resources/views/layouts/app.blade.php -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
2. Nơi chứa file static (Đã nén hoặc dùng trực tiếp)
Nếu có các file .js hoặc .css thuần (như library bên ngoài hoặc file script legacy) không qua trình đóng gói Vite, developer sẽ đặt trực tiếp tại thư mục public/:
my-laravel-project/
├── public/
│ ├── css/
│ │ └── static-style.css
│ └── js/
│ └── static-script.jsCách nhúng vào Blade Layout:
Nhúng trực tiếp bằng thẻ HTML thông thường qua helper asset():
<link rel="stylesheet" href="{{ asset('css/static-style.css') }}">
<script src="{{ asset('js/static-script.js') }}"></script>3. Quy chuẩn sắp xếp của Senior / Pro Developers
Khi tham khảo các repository lớn trên GitHub (như Laravel Breeze, Laravel Jetstream, hay các project mã nguồn mở chuẩn):
Sử dụng cấu trúc Module / Component:
Trong resources/js/, họ không viết chung trong 1 file app.js lớn mà chia nhỏ thành các thư mục như components/, pages/, services/, utils/.
Sử dụng CSS Framework / Preprocessor:
Thay vì file .css thuần, dự án chuyên nghiệp thường dùng Tailwind CSS hoặc Sass/SCSS (resources/css/app.css hoặc resources/scss/app.scss).
Cấu hình vite.config.js:
Mọi file JS/CSS đóng vai trò là "Entry Point" (file gốc) đều phải khai báo trong file vite.config.js:
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});Tóm tắt nhanh
File tự viết cần compile/bundle (Khuyên dùng) → resources/css/ và resources/js/.
File static dùng trực tiếp (Không qua Vite) → public/css/ và public/js/.
Dưới đây là hướng dẫn thực tế từng bước để tạo và chèn file custom.js vào file Blade theo chuẩn Laravel mới nhất (sử dụng Vite).
Bước 1: Tạo file custom.js
Tạo file tại đường dẫn: resources/js/custom.js
// resources/js/custom.js
console.log("File custom.js đã chạy thành công!");
document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('myBtn');
if (btn) {
btn.addEventListener('click', function () {
alert('Bạn vừa bấm nút!');
});
}
});Bước 2: Khai báo vào vite.config.js
Mở file vite.config.js ở thư mục gốc của dự án và thêm đường dẫn file custom.js vào mảng input:
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/js/custom.js', // THÊM DÒNG NÀY
],
refresh: true,
}),
],
});Bước 3: Nhúng vào file Blade View
Thêm chỉ thị @vite() chứa file custom.js vào thẻ <head> hoặc trước khi đóng thẻ </body> trong giao diện Blade:
<!-- resources/views/welcome.blade.php (hoặc file layout của bạn) -->
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ chèn JS trong Laravel</title>
<!-- Nhúng CSS chính và file custom.js -->
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/custom.js'])
</head>
<body>
<h1>Trang web Laravel</h1>
<button id="myBtn">Click thử</button>
</body>
</html>Bước 4: Chạy lệnh biên dịch Assets
Khi phát triển (Development Mode), bạn bật terminal ở thư mục dự án và chạy:
npm run devLưu ý: Nếu deploy lên server thật (Production), bạn cần chạy lệnh npm run build để Vite đóng gói và tối ưu file custom.js.
Có thể, nhưng không khuyên dùng đối với môi trường chuyên nghiệp.
Dưới đây là cách thực hiện nếu bạn vẫn muốn làm, cùng với lý do vì sao cách này tồn tại nhiều rủi ro.
Cách làm (Nếu làm theo ý bạn)
Chạy lệnh đóng gói ở Local:
Mở Terminal tại thư mục dự án bên máy bạn và chạy:
npm run buildKiểm tra thư mục đầu ra:
Lệnh trên sẽ tạo ra thư mục public/build/. Thư mục này chứa tất cả file CSS/JS đã được nén, tối ưu và đặt tên theo mã hash (ví dụ: custom-A1b2C3.js).
Upload lên Host:
Sử dụng FTP (FileZilla) hoặc cPanel File Manager để upload toàn bộ thư mục public/build/ từ máy bạn lên host thật.
Bỏ qua Node.js trên Host:
Host thật không cần cài Node.js hay npm vẫn chạy được giao diện bình thường.
Rủi ro & Nhược điểm cần lưu ý
Xung đột môi trường (Environment Mismatch): File .env ở Local và Production thường khác nhau (ví dụ: APP_URL). Một số thư viện JavaScript đọc cấu hình từ file .env lúc build. Nếu build ở Local, nó sẽ mang theo cấu hình Local lên Production.
Tốn dung lượng Git (Nếu dùng Git): Nếu bạn đẩy cả thư mục public/build/ lên GitHub/GitLab, file lưu trữ sẽ phình to rất nhanh vì mỗi lần rebuild lại tạo ra các file mã hash mới.
Quên upload: Rất dễ xảy ra trường hợp bạn sửa file custom.js, chạy npm run build nhưng quên upload thư mục public/build/ mới lên host, khiến giao diện thực tế không thay đổi.
Chuẩn Pro / CI-CD làm như thế nào?
Trên các dự án thực tế, người ta áp dụng một trong hai quy trình sau:
Dùng SSH chạy trên Host:
Upload mã nguồn (bao gồm file gốc resources/js/custom.js), mở SSH trên Host và chạy trực tiếp:
npm install && npm run buildDùng CI/CD Automation (GitHub Actions / GitLab CI):
Developer chỉ cần git push mã nguồn lên.
Server CI/CD tự động bật một môi trường ảo, tự chạy npm run build, sau đó tự đẩy thư mục public/build/ sang Production Server.
Không có nhận xét nào:
Đăng nhận xét