AdonisJS-설정 Laravel mix 소개

13778 단어 nodetailwindcssadonisjs
본 논문에서는 Adonis JS 템플릿 엔진(Edge)을 사용하고 Webpack/Laravel mix를 설정해서TailwindCSS와 Alpine를 처리하는 방법을 배울 것입니다.js.

뷰 및 템플릿


Adonis JS의 공식 및 추천 템플릿 엔진은 Edge입니다.논리 템플릿 엔진으로서 다음과 같은 몇 가지 간결한 기능을 제공합니다.
  • 쓰기 쉬운 문법
  • 조건, 순환, 레이아웃 및 부분에 대한 지원
  • 구성 요소 지원(개인별 선호)
  • Chrome DevTools
    • 을 사용하여 런타임 디버깅 가능
  • 정밀 스택 추적
    • 이 시리즈에서, 우리는 엣지의 모든 기능을 포함하지 않고, 우리의 todo 응용 프로그램에 필요한 부분만 주목합니다.

    뷰 렌더링

    start/routes.ts 파일을 열고 다음 코드 세그먼트로 모든 내용을 대체합니다.
    import Route from '@ioc:Adonis/Core/Route'

Route.get('/', 'TodosController.index')
    이전 글의 TodosController을 가지고 있다고 가정해 보세요.내용을 다음 코드 세그먼트로 바꿉니다.
    import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class TodosController {
  public async index({ view }: HttpContextContract) {
    return view.render('todos/index')
  }
}
  • view.render 방법은 resources/views 디렉토리에 저장된 템플릿 파일의 경로를 가져옵니다.
  • 에 파일 확장자를 추가하는 것은 선택 사항입니다.
  • 반환 값은 문자열입니다.우리의 예에서, 그것은 최종 HTML을 포함하는 문자열이 될 것이다.
    • Adonis/Core/View 모듈을 사용하여 뷰를 렌더링할 수도 있습니다.예를 들면 다음과 같습니다.
    import View from '@ioc:Adonis/Core/View'
View.render('todos/index')
    그러나 모듈을 직접 사용하는 것과 ctx.view을 사용하는 대상 사이에는 차이가 있다.ctx.view 객체에는 요청 상세 정보, 인증된 사용자, 세션 플래시 메시지 등 현재 HTTP 요청에 대한 정보도 포함됩니다.따라서 HTTP 요청 시 항상 ctx.view을 사용하는 것이 좋습니다.

    뷰 파일 생성하기


    다음ace 명령을 사용하여 todos/index.edge 파일을 만듭니다.
    node ace make:view todos/index

# CREATE: resources/views/todos/index.edge
    새로 만든 파일을 열고 다음 내용을 붙여넣습니다.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>

  <body>
    <h2>Todos app</h2>
    <p>We will being rendering todos here</p>
  </body>
</html>
    마지막으로 렌더링된 HTML을 보려면 http://localhost:3333 URL을 방문하십시오.

    고정 자산에 대한 서비스


    지금까지 우리가 한 일은 모두 서버 측에 있다.그러나, 우리는 CSS를 사용하여 웹 스타일을 디자인하고, 웹 페이지가 상호작용을 가지도록 전단 자바스크립트를 작성하는 방법이 필요하다.
    이제 Webpack과 같은 구축 툴을 사용하여 프런트엔드 자산을 단계적으로 묶을 수 있습니다.
    먼저 브라우저에 CSS 및 JavaScript 파일을 제공하는 방법이 필요합니다.AdonisJS에서는 이 파일들을 public 폴더에 저장한 다음 상대 경로로 접근해야 합니다.한번 해보자.styles.css 디렉토리에 public이라는 새 파일을 만들고 다음 내용을 붙여넣습니다.
    body {
  background: #d7dceb;
  background: -webkit-linear-gradient(to right, #d7dceb, #e2e2e2);
  background: linear-gradient(to right, #d7dceb, #e2e2e2);
}
    현재 브라우저의 파일에 액세스하려면 http://localhost:3333/styles.css을 방문하십시오.

    위대하다resources/views/todos/index.edge을 열고 이 css 파일을 불러오겠습니다.
    <head>
  <!-- Other tags -->
  <link rel="stylesheet" href="/styles.css" />
</head>
    JavaScript 파일, 이미지, 글꼴 등의 경우 같은 절차를 반복할 수 있습니다.

    자산 바인딩 사용


    이전 절에서, 우리는 정적 파일을 public 폴더에 추가함으로써 정적 파일에 서비스를 제공하는 작업을 완성했다.물론 이 파일들은 브라우저가 이해하고 해석하며 실행할 수 있는 방식으로 작성되어야 한다.
    그러나 우리는 복잡한 세계에서 생활한다.우리는 이미 전치/후치 프로세서를 사용하는 것에 익숙해졌다.브라우저가 완전히 이해할 수 없는 코드를 작성합니다.따라서, Webpack과 같은 도구가 우리 버전의 코드를 다른 브라우저가 이해할 수 있는 것으로 컴파일해야 한다.

    Laravel Mix 사용


    Laravel 커뮤니티(구체적으로 Jeffrey Way)는 Laravel mix을 창설하여 웹 패키지를 고급스럽고 지루하지 않은 API로 포장했다.가방이 키워드 Laravel을 사용하더라도 단독으로 사용할 수 있다.
    다행히도 AdonisJS는 a package이 있어 AdonisJS 응용 프로그램에서 Laravel mix를 사용하는 설정 과정을 간소화할 수 있다.
    그것을 설치하는 것부터 시작합시다.
    npm i --save-dev adonis-mix-asset laravel-mix@next
    패키지를 구성하려면 다음 명령을 실행하십시오.
    node ace invoke adonis-mix-asset

# CREATE: webpack.mix.js
# UPDATE: .adonisrc.json { commands += "adonis-mix-asset/build/commands" }
# UPDATE: .adonisrc.json { providers += "adonis-mix-asset" }
# CREATE: ace-manifest.json file
    다음ace 명령을 실행하여 컴파일 과정을 시작합니다.또한 adonis mix 자산 패키지의 README file을 수시로 참고하시기 바랍니다.
    node ace mix:watch

    TailwindCSS 설정


    우리 다 준비됐어!테스트를 진행하기 전에 Tailwind CSS을 설치하고 구성하겠습니다.
    npm i -D tailwindcss

# Create a Tailwind config file
npx tailwindcss init
    webpack.mix.js 파일을 열고 다음 코드 줄을 추가합니다.
    mix.postCss('resources/css/styles.css', 'public/css', [require('tailwindcss')])
  • 여기서 믹스에게 POSTSS를 사용하여 resources/css/styles.css 파일을 처리하라고 알려 드리겠습니다.
  • 출력은 public/css 폴더에 기록해야 합니다.
  • 이외에 Tailwind를 PostSS 플러그인으로 사용하고 있습니다.
    • 왜 자원 폴더가 공용이 아니에요?
    만약 알고 있다면, PostCSS는 공용 폴더가 아닌 resources/css 폴더에서 파일을 읽는다고 알려 줍니다.
    postsss 문법은 브라우저가 이해할 수 있는 것이 아니기 때문에 이 파일을 public 폴더에 저장할 필요가 없습니다.반대로, 우리는 처리된 출력이 public 폴더에 있기를 희망합니다.
    이는 프런트엔드 JavaScript, 이미지 등 다른 모든 파일에 적용됩니다.사전 처리가 필요한 자산은 public 폴더에 없어야 합니다.public 폴더에 추가된 모든 컨텐츠를 삭제합니다.
    rm -r public/*
    css/styles.css 디렉터리에 resources이라는 새 파일을 만들고 다음 내용을 붙여넣습니다.
    @tailwind base;
@tailwind components;
@tailwind utilities;
    마지막으로 Laravel mix에서 만든 CSS 파일을 public 폴더에 로드하는 템플릿을 업데이트해야 합니다.
    <link rel="stylesheet" href="/css/styles.css" />
    지금 한번 해보자.다음 명령을 실행하여 HTTP 서버 및 mix 프로세스를 시작합니다.
    # Starts AdonisJS server
node ace serve --watch

# Inside another terminal session
node ace mix:watch
    현재 브라우저에서 웹 페이지를 열면, TailwindCSS가 페이지에 불러오는 것을 분명히 볼 수 있습니다.

    알프스 산을 설치하다.Js


    동일한 절차에 따라 Alpine을 빠르게 설정합니다.js.패키지 설치부터 시작합니다.
    npm install alpinejs
    app.js 디렉토리에 resources/js이라는 JavaScript 파일을 만들고 다음 내용을 붙여넣습니다.
    import 'alpinejs'
    다음은 믹스에게 webpack.mix.js 파일에 다음 코드 줄을 추가해서 이 파일을 미리 처리하라고 알려 줍니다.
    mix.js('resources/js/app.js', 'public/js')
    또한 믹스가 프로필 변경을 받을 수 있도록 node ace mix:watch 명령을 다시 시작해야 합니다.
    마지막으로 처리된 JavaScript 파일을 헤드 태그에 로드할 수 있습니다.
    <script src="/js/app.js" defer></script>
    테스트 실행을 진행하려면 body 표시를 수정하십시오. 아래와 같습니다.
    <body x-data="{}" x-init="() => alert('Alpine is ready')">
  <h2>Todos app</h2>
  <p>We will being rendering todos here</p>
</body>

    폐막사


    처음에 나는 심지어 게시물에 웹 페이지를 디자인하기로 결정했다.그러나 우리는 이미 많은 방면을 토론했기 때문에 디자인 단계를 다음 문장으로 옮깁시다.
    오늘 저희가 알아봤어요.
  • 은 ctx.view.render 방법을 사용하여 뷰를 렌더링합니다.
  • 서버 프런트엔드 자산을 public 폴더에 저장합니다.
  • 은 프런트엔드 자산을 처리하고 adonis-mix-asset 폴더에 쓰기 위해 public을 설정합니다.
    • 원형 체인 관련 개념
    React 노트 4 (React, Babel, webpack, PostCSS)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage