TypeScript, SCSS 및 Pug를 사용하여 5분 이내에 웹사이트를 설정하는 방법

반응형

이 기사에서는 웹팩 없이 SCSS, Pug, TypeScript를 사용하여 웹 사이트를 5분 이내에 설정하는 방법을 보여드리고자 합니다.

정보

당신이 폴더, 패키지를 만들어야 한다는 것을 알려주지 않을게요.json 파일, Node.js가 컴퓨터에 설치되어 있어야 합니다. 왜냐하면 제가 이 문서를 아는 사람들을 위해 작성했기 때문입니다.

웹 팩은 어떨까요?

 

저는 웹팩을 정말 좋아하지만 가끔은 작은 웹 사이트를 만들고 싶을 때 0부터 구성해야 합니다. 파일 생성, 많은 종속성 설치. 이 시간은 SCSS 변수와 같은 다른 것에 사용될 수 있다. 가끔 오류가 날 수 있는데 어떻게 풀어야 할지 모르면 인터넷으로 해결책을 검색하거나 스스로 풀어야 한다. 내 생각에 그것은 시간 낭비다.

웹팩이 아니라면요, 그래서요?

너무 오래 사용하고 있습니다. 소포 묶음기. 이것은 리액트, SCSS, TypeScript, Pug 등의 기술을 불필요한 구성 파일 없이 사용할 수 있는 제로 구성 오픈 소스 도구입니다. 괜찮죠?

기술 스택 정보

제가 Pug, SCSS, TypeScript를 선택한 이유는 웹사이트 생성에 유연하고 오류를 더 빨리 해결하고 싶기 때문입니다.

 

프로젝트 구성

좋아, 우리가 가장 중요한 것을 안다면 시작할 수 있어. 먼저 종속성을 설치해야 합니다. 저는 NPM을 사용할 예정이지만, Yarn, PNPM 또는 다른 패키지 매니저를 사용하셔도 됩니다.

npm install sass pug && npm install — save-dev typescript parcel

index.pug 파일을 만들고 설정합니다.

doctype html
html(lang="en")
  head
      meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
      body
          h1 Hello world!
            ```

            <div class="content-ad"></div>

            styles.scss 파일을 작성합니다.

            ```js
            body {
             color: #333;
              background-color: #f5f5f5;
              }
              ```

              main.ts 파일을 작성합니다.

              ```js
              const names: string[] = ["John", "Arthur", "Bill", "Jack"];
              console.log(names.join(", "));
              ```

              환상적이네요, 이제 이 파일들을 퍼그 파일에 적용해야 합니다.

              <div class="content-ad"></div>

              # 연결 중인 파일

              당신의 스타일과 스크립트를 Pug 파일에 연결하려면 링크와 스크립트 태그로 가져와야 합니다. 쉽죠? 웹 팩에서 스크립트의 경로를 선언하고 스크립트의 스타일을 가져와야 합니다.

              ```js
              doctype html
              html(lang="en")
               head
                 meta(charset="UTF-8")
                   meta(http-equiv="X-UA-Compatible", content="IE=edge")
                     meta(name="viewport", content="width=device-width, initial-scale=1.0")
                       title Document
                         link(rel="stylesheet", href="./styles.scss")
                          body
                            h1 Hello world!
                              script(src="./main.ts")
                              ```

                              내가 말했듯이, 너무 쉬워.

                              # 로컬 호스트

                              <div class="content-ad"></div>

                              이제 우리는 당신의 웹사이트를 localhost에서 호스팅해야 합니다. 터미널을 열고 다음 명령을 입력합니다.

                              ```js
                              parcel ./index.pug
                              ```

                              3000이 아닌 다른 포트에서 시작하려면 포트 8000을 추가로 입력해야 합니다. 저는 8000을 선택했는데, 왜냐하면 저는 제 모든 웹사이트를 거기에 호스팅하기 때문입니다.

                              # 건물

                              신청서 작성을 완료했다면 작성할 수 있습니다. 터미널 입력:

                              <div class="content-ad"></div>

                              ```js
                              parcel build ./index.pug
                              ```

                              # 유용한 웹 사이트

                              - 구획 문서
                              - 임시 문서
                              - TypeScript 설명서
                              - 퍼그 설명서

                              # 승인

                              이 글을 읽어주셔서 감사합니다. 당신이 원한다면, 댓글로 그것에 대해 어떻게 생각하시는지 말하거나 더 나은 방법으로 공유해주세요.

                              <div class="content-ad"></div>