이 기사에서는 Laravel 9.x에서 프런트 엔드 워크플로를 사용한 다음과 같은 경험을 공유할 것입니다. 이전에는 Laravel Mix를 사용했지만 지금은 이번에는 이를 사용할 것입니다. 공식적으로 권장되는 Vite 도구는 부트스트랩 5를 계속 사용하면서 강좌 학자가 최신 프런트 엔드 작업 흐름을 익히는 것을 촉진할 뿐만 아니라 낮은 임계값으로 선호하는 스타일을 조정할 것입니다. 가장 중요한 것은 튜토리얼의 학습 진행과 리듬에 영향을 주지 않는 것입니다. [추천: laravel 동영상 튜토리얼]
앞에 작성
개발 환경:
주 환경은 Windows 10/11 + Homestead이며 둘 다 최신 안정 버전입니다
플랫폼 2개 Node.js가 설치되었습니다
Laravel 버전은 9.x입니다(게시할 때 최신 9.38.0을 사용하고 있습니다). 언급되지 않은 다른 내용은 9.x 버전 튜토리얼을 따르세요
Laravel Mix를 사용하지 마세요. , 공식적으로 권장되는 새로운 프런트 엔드 패키징 도구 vite를 사용하여 튜토리얼의 스타일 수정 작업을 완료하세요.
내 목적: Windows 및 Homestead 플랫폼에서 Node.js를 사용하여 Bootstrap 설치 시 함정을 피하고, 열심히 일하는 Win 사용자가 "L01 Laravel Tutorial - Practical Introduction to Web Development"의 "4.2"를 배울 수 있도록 합니다. 스타일 미화 "장은 우아하고 편안합니다.
더 이상 말도 안되는 온라인 작업은 없습니다
작동 방법
우선 독자가 이미 "4.2. 스타일 미화" 장을 배웠고 불행히도 자신의 Windows 컴퓨터가 막혔다고 가정합니다. 및 Homestread 환경을 사용할 수 있습니다. Node.js를 실행합니다. Windows에 Node.js가 설치되어 있지 않은 경우 검색 엔진을 통해 검색하고 다운로드할 수 있습니다. 설치 과정은 간단하므로 자세한 내용은 다루지 않겠습니다.
먼저 튜토리얼에 따라 다음 단계를 수행하지만 아직 실행하지는 마세요
composer require laravel/ui:3.4.5 --dev
변경해 보겠습니다. 여기서는 기본 최신 laravel/ui 버전을 직접 가져와서 Linux에서 실행합니다
composer require laravel/ui // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹 php artisan ui bootstrap
그런 다음 하나를 엽니다. powershell과 같은 Windows 환경 터미널에서
npm config set registry=https://registry.npm.taobao.org npm i
를 실행한 다음 편집기로 돌아가서 프로젝트 루트 디렉터리에서 새로 생성된 vite.coffig.js를 찾아 다음 효과
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js',
]),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});로 수정한 다음 가져옵니다. app.js의 Boostrap 5 scss
import './bootstrap'; // 以下为新增部分 import '../sass/app.scss' import * as bootstrap from 'bootstrap'
이후 프로젝트의 블레이드 템플릿으로 이동하여 원래 mix() 코드를 교체합니다. 여기서 튜토리얼을 따르면 default.blade.php 파일만 변경하면 됩니다. 즉, 이 두 줄의 코드
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>를 @vite 코드
@vite(['resources/js/app.js'])
로 바꾸면 됩니다. 다음은 default.blade에 넣은 내용입니다. php
@yield('title', 'Weibo App') - Laravel 入门教程
@vite(['resources/js/app.js']) <--- here!
@yield('content')
위치 이후에는 Mix와 관련된 모든 것이 이 아이디어에 따라 처리됩니다.
마지막으로 Windows 터미널에 다음 명령을 입력하세요
npm run build // 或者 npm run dev
작업이 완료되었습니다. 다음 브라우저를 새로 고쳐서 효과를 확인하세요.
개발과 빌드의 차이점은 다음과 같습니다.
dev는 개발에 적합할 때 언제든지 조정할 수 있으며, 수정 사항은 실시간으로 자동으로 적용됩니다. 항상 창을 열고 중단하는 것이 좋습니다.
Build는 한 단계를 거치게 됩니다. 처리가 완료되고 CSS 및 js 파일이 출력되면 자동으로 실행되지 않고 한 번만 실행되므로 최종 게시 단계에 적합합니다.
속도 측면에서 볼 때, laravel Mix 프론트엔드 워크플로우에 비해 Vite는 매우 빠른 속도로 꾸준히 처리해 드릴 것입니다. Vite의 처리 속도는 정말 빠릅니다.
프로젝트 배포
우리 코드가 원격 git 창고에 업로드된 후 프로덕션 환경으로 풀링되면 npm run build를 사용하여 vite에서 생성된 CSS 및 js 파일은 git 관리에 포함되지 않습니다. 로컬 git add -A는 이를 포함할 수 없습니다. 로컬 개발 프로젝트의 루트 디렉터리에서 .gitignore 파일을 찾고, 다음과 같이 /public/build 줄에 주석을 달거나 삭제해야 합니다
/node_modules # /public/build <-- here /public/hot /public/storage /storage/*.key /vendor .env .env.backup .phpunit.result.cache Homestead.json Homestead.yaml auth.json npm-debug.log yarn-error.log /.idea /.vscode
그러면 우리가 빌드하는 파일은 다음과 같습니다. git add -A가 감지되었습니다.
물론 온라인에서 스타일을 컴파일할 수도 있습니다. 이 아이디어를 이해하는 한 하나의 예에서 추론을 이끌어낼 수 있습니다.
기타 팁
bootstrap 5는 원래 4 버전의 Jumbotron 구성 요소를 삭제했기 때문에 해당 스타일을 볼 수 없는 것이 정상입니다. 바꾸고 싶다면 상상력을 발휘하여 직접 작성해 보세요.
4.4장 브라우저 캐시 문제와 관련하여 vite의 프런트엔드 워크플로를 사용하면 빌드가 완료된 후 접미사가 자동으로 스타일 파일에 추가되므로 이 장을 읽을 필요가 없습니다. vite를 사용하는 작업 모드가 없습니다. 이 질문은 건너뛰고 계속 공부하세요.
이 기사에서 자신만의 방법을 생각해 낼 수 있는 부분이 있다면 이것이 최선이 아닐 것입니다. 가장 좋은 결과는 모든 사람이 자신만의 독립적인 사고 질문을 생각해 낼 수 있다는 것입니다. 귀하에게 적합한 솔루션을 살펴보겠습니다.
최종 생각
라라벨을 배우기 위해 특정 버전을 사용하는 중재자 튜토리얼의 방법과 비교해 볼 때, 저는 여전히 공식 문서를 따르고 기본 방법을 사용하여 관련 효과를 얻고 모든 측면에서 최신 버전을 사용하는 것을 좋아합니다. 중재자가 권장하는 표준화 아이디어에 따른 "반항적 인 악"입니다. 또한 때때로 발생하는 새 버전 호환성 문제를 해결해야합니다. 요컨대, 이 글이 초보자들에게 새로운 아이디어를 제공할 수 있기를 바랍니다. 결국 우리는 프로덕션 환경 개발이 아닌 학습 단계에 있으므로 더 많이 배울수록 좋습니다.
8에서 공유한 이전 경험과 비교했습니다. 스스로 공부하고, 해결책을 찾고, 문제를 해결하세요. 학습 방법보다 아이디어를 배우는 것이 더 중요합니다. 10.x와 100.x의 이후 버전에는 더 많은 새로운 콘텐츠와 변화가 있을 것이라고 믿습니다. 문제를 해결하고 엄격한 학습 방법은 효과가 없을 것입니다. 학습 여정의 모든 초보자가 이 아름다운 프레임워크를 포기하지 않기를 바랍니다.
위 내용은 Laravel9.x에서 Bootstrap을 빠르게 설치하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
