[laravel] laravel mix를 사용해 보도록 하겠습니다.
10540 단어 LaravelPHPlaravelmixtech
laravel : v8.21.0
php : 7.4.14
연결용 링크: 일반 PHP만 만나보신 분들은 laavel-Qita를 만져보세요.
ravel mix 소개
Laavel Mix란 무엇입니까?더 편하고 더 간단해요.Laavel 이외에도 사용할 수 있어요. -Qiita
즉, js와 css를 컴파일하여 정식 촬영 환경에서도 쉽게 사용할 수 있는 녀석(적당)
설치하다.
laraval이면 npm만 설치하면 됩니다.
% npm install
자바스크립트 쓰기
어쨌든 서류가 없으면 말하면 안돼.
제작된 서류는
resources/assets/ 이하에 두다lavel mix도 typescript를 처리할 수 있기 때문에 오랜만에 typescript를 배워야 한다
(제목과 격렬하게 모순됨)
resources/assets/ts/test.ts
let str: string = "this is a test";
const doc: HTMLElement | null = document.getElementById("tes");
if(doc){
doc.innerHTML = str;
}
#tes 요소의 내용만 this is a test로 설정한다.typescript 설정
이것은 방금 typescript를 쓴 상태에서만 필요합니다.자바스크립트 쓸 때 싫어요.
나중에 컴파일할 때 설정이 필요합니다. 먼저 설정하십시오
% tsc --init
tsc --init 및 생성tsconfig.json파일을 열고 다음 내용을 다시 쓰기 (임의)tsconfig.json
-"target": "es5",
+"target": "es2020",
tsconfig.json의 모든 옵션 이해하기(수시로 추가 중) - Qita
편역하다
컴파일하기 전에 하나를 준비해야 합니다.
먼저 열기
webpack.mix.js다음 행 추가webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.ts('resources/ts/test.ts', 'public/js') // <-この１行を追加
.postCss('resources/css/app.css', 'public/css', [
//
]);
% npm run dev
(長い出力)
✔ Compiled Successfully in 3625ms
npm run production.이렇게 압축할 수도 있음)마지막으로 출력
Compiled Successfully을 하면 완성됩니다.public/js/test.js 파일이 있어야 합니다.실제 출력해보세요.
다음은 블레이드.php로 출력하기만 하면 됩니다.
창설
resources/views/test.blade.php 및 아래 내용 설명resources/views/test.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>テスト</title>
</head>
<body>
<div id="tes"></div>
<script src="{{ mix('js/test.js') }}"></script>
</body>
</html>
routes/web.php의 마지막 줄에서 다음과 같은 내용을 묘사한다.routes/web.php
// 前略
Route::get('/test', function () {
return view('test');
});
나타내다
http://127.0.0.1:8000/test에 액세스하면 This is the test가 표시됩니다.끝맺다
한번 해보면 알겠지만 한번 해보기 전엔 어려워요.익숙해지기 전에 시간이 많이 걸릴 것 같아요.
(그나저나 라벨의 투고에 php가 포함된 라벨이 적당하다고 생각하십니까...)
계속?:[laavel] laavel mix의 웹 패키지.mix.js의 개작을 생략하고 싶습니다!
참조 사이트:
Laavel Mix로 손쉽게 프런트 엔드 개발 환경 구축 2020년판 작업 환경 햇볕 쬐기 ~ 프런트 엔드 개발 환경 편 ~ -arms inc.engineers'Blog
Reference
이 문제에 관하여([laravel] laravel mix를 사용해 보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yuuyu/articles/8bf953a0fd2a98텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
