웹사이트 프로젝트를 설정하는 것을 싫어합니다.
모든 것을 구성하는 데 너무 많은 시간을 할애하지 않고 실제 코딩에 뛰어들고 싶습니다.
그래서 WebPack이나 Gulp와 유사한 빌드 도구이지만 "구성이 없는" 번들러로 청구되는 Parcel.js를 사용해 보게 되어 정말 기뻤습니다.
그리고 내가 말해야 하는 것은 – 소포가 배달되었습니다. index.html, script.js 및 style.scss 파일을 사용하여 빠른 프로젝트를 만든 후 5분도 채 되지 않아 실행이 완료되었습니다!
Parcel이 할 수 있는 몇 가지 작업은 다음과 같습니다.
- Sass 및 Babel과 같이 필요한 다른 패키지를 자동으로 설치합니다.
- Parcel이 자동으로 Sass 파일을 CSS로 컴파일합니다.
- 기본 기능에 대한 구성 파일을 만들 필요가 없습니다(나중에 자세히 설명).
- 보너스:Parcel은 로컬 개발 서버를 가동하고 파일을 변경할 때마다 자동으로 업데이트합니다!
따라서 간단한 프론트 엔드 웹 앱에서 작업하고 빌드에 대한 많은 제어가 필요하지 않은 경우 Parcel에서 WebPack 또는 Gulp로 바꿀 수 있습니다. Gulp를 사용하고 있지만 앞으로 Parcel을 사용할 계획입니다.
Parcel을 시작하고 실행하는 방법을 살펴보겠습니다!
소포 설치
npm 또는 yarn을 사용하여 Parcel을 설치할 수 있습니다. package.json 파일도 생성해야 합니다. (참고:Node.js가 설치되어 있지 않다면 이 단계 전에 설치해야 합니다!)
npm:
npm install -g parcel-bundler
npm init -y
실:
yarn global add parcel-bundler
yarn init -y웹사이트 파일 설정
다음 파일만으로 매우 간단한 웹사이트를 만들 것입니다.
- index.html
- 스크립트.js
- style.scss
Parcel은 JavaScript 파일을 사용하여 프로젝트에 도달하므로 index.html 파일에 이를 가리키는 스크립트 태그를 추가합니다.
<script src="./script.js"></script>그런 다음 script.js 파일에 Sass 파일을 포함합니다.
import '/style.scss';소포를 실행!
이것이 베어 본 설정에 필요한 모든 구성입니다!
Parcel을 실행하려면 명령줄에서 다음 명령을 사용하십시오.
parcel index.html
이것은 프로젝트를 빌드하고 https://localhost:1234/에서 로컬 개발 서버를 시작합니다. 이것에 대한 멋진 부분은 파일을 변경할 때마다 Parcel이 자동으로 로컬 사이트를 재구축하고 업데이트한다는 것입니다.
또한 빌드 명령을 사용하면 Parcel이 HTML, CSS 및 JS 파일을 축소합니다. 다시 말하지만 추가 패키지를 설치할 필요가 없습니다!
parcel build index.html엄청나게 쉬워보이죠? 특히 WebPack이나 Gulp와 씨름하는 데 익숙하다면 그렇습니다. 🙂
그래서 Parcel은 어떻게 작동합니까?
Parcel로 빌드하면 프로젝트에 /dist 폴더가 생성되고 해당 폴더에 파일의 컴파일된 복사본이 저장됩니다. 여기에서 개발 서버가 실행됩니다.
개발자 서버가 필요하지 않거나 필요하지 않은 경우 직접 만들고 /dist 폴더 내용을 소스 파일로 사용할 수 있습니다.
기본적으로 Parcel은 파일을 변환하기 위해 일부 패키지를 설치하고 사용합니다.
- Babel은 ES6 구문을 모든 브라우저에서 사용할 수 있는 JavaScript 버전으로 변환하는 데 사용됩니다.
- CSS Nano는 빌드 명령을 사용할 때 CSS를 축소하는 데 사용됩니다.
하지만 더 원하면 어떻게 합니까?
따라서 기본 사항만 필요한 경우 위의 구성이 좋습니다.
하지만 Parcel이 더 많은 작업을 수행해야 하는 경우 추가 패키지를 설치해야 하며 예, 구성 파일이 한두 개 필요할 수 있습니다.
자동 접두사를 추가하여 필요한 CSS 속성에 공급업체 접두사를 추가하고 싶었습니다. 불행히도 Parcel은 기본적으로 그렇게 하지 않지만 내 프로젝트에 autoprefixer를 추가하는 것은 상당히 간단했습니다.
먼저 autoprefixer를 실행하는 PostCSS를 설치했습니다.
yarn add postcss-modules autoprefixer그런 다음 다음 코드를 사용하여 프로젝트 루트에 구성 파일을 만들었습니다.
{
"plugins": {
"autoprefixer": true
}
}참고:이 코드는 Parcel이 PostCSS 설정 지침에 있는 것과 다릅니다. 그러나 코드 조각을 사용할 때 프로젝트를 빌드할 때 접두사 속성을 사용하던 CSS 클래스 이름이 바뀌었습니다. 이로 인해 해당 클래스 이름에 대한 모든 CSS 스타일이 작동하지 않습니다. 따라서 자동 접두사를 사용하는 경우 여기 위에 있는 코드 스니펫을 사용하는 것이 좋습니다.
Parcel이 처리할 수 있는 다른 파일이 무엇인지 궁금하다면 해당 웹사이트를 반드시 확인하십시오. Parcel은 TypeScript, React, Vue 및 기타 여러 유형의 프로젝트와 함께 작동할 수 있습니다.
여기 내 GitHub 계정에서 이 튜토리얼에서 사용한 파일을 얻을 수도 있습니다.
WebPack과 Gulp를 Parcel로 교체해야 하나요?
SCSS 파일을 CSS로 컴파일해야 하는 초보자라면 Parcel이 탁월한 선택이 될 것입니다. 더 많은 제어 또는 많은 사용자 정의가 필요한 경우 WebPack 또는 Gulp가 여전히 귀하를 위한 선택일 수 있습니다.
앞으로는 특히 간단한 프론트엔드 프로젝트에서 Parcel을 기본 빌드 도구로 사용할 계획입니다.
소포에 대해 어떻게 생각하세요? 아래에 자유롭게 의견을 남겨주세요.
