No-Config 웹 응용 프로그램 번 들러 Parcel.js 소개

No-Config 웹 응용 프로그램 번 들러 Parcel.js 소개

No-Config 웹 응용 프로그램 번 들러 Parcel.js 소개
СОДЕРЖАНИЕ
02 июня 2020

이 게시물은 자체 선언 된 Parcel.js에 대한 소개입니다. "빠른 제로 구성 웹 애플리케이션 번 들러." 시작하기 위해 알아야 할 모든 것이 있습니다.


많은 프론트 엔드 개발자들은 오늘날 웹 응용 프로그램을 구축하는 데 따르는 복잡한 문제에 좌절하고 있습니다. 프론트 엔드 워크 플로우에 일종의 빌드 또는 번들링 툴을 포함시키는 것은 매우 일반적인 관행이므로, 많은 개발자들이 웹팩과 같은 프론트 엔드 툴을 사용하는 것을 고려했습니다.

웹팩 가장 인기있는 번 들러이며 Require.js, Rollup 및 유사한 솔루션의 뒤를 잇습니다. 그러나 웹팩과 같은 도구의 학습 곡선은 가파 릅니다. 복잡한 구성으로 인해 웹팩을 시작하는 것은 쉽지 않습니다. 결과적으로 최근 몇 년 동안 또 다른 솔루션이 등장했습니다. 이 도구는 반드시 프론트 러너는 아니지만 프론트 엔드 모듈 번 들러 환경에서 소화하기 쉬운 대안입니다. Parcel.js 소개.

Parcel.js 소개

Parcel.js (parceljs.org)는 많은 개발자가 원하는 초보 개발자입니다. 구성이 간단하고 구성이 간단한 번 들러로 빠르게 시작할 수 있습니다..

이 Parcel 튜토리얼이이 툴에 대한 이해하기 쉬운 소개를 제공하기를 바랍니다. 기본 사항을 다루고 Parcel을 사용하여 Babel과 Sass를 통합하는 간단한 웹 앱을 번들로 묶는 방법을 보여 드리겠습니다..

�� 목차 :

  1. 왜 웹앱 번 들러를 사용합니까? #
  2. Parcel.js 설치 #
  3. 파일 진입 점 만들기
  4. dist / 폴더 #
  5. Babel #과 함께 Parcel.js 사용
  6. Sass #과 함께 Parcel.js 사용
  7. Parcel #을 사용하여 여러 스크립트 번들링
  8. Parcel.js로 코드 분할 #
  9. Parcel.js를 사용한 프로덕션 빌드 #
  10. 소포 사용의 단점은 무엇입니까? #

Parcel.js 웹 사이트

웹앱 번 들러를 사용해야하는 이유?

Parcel.js와 같은 앱 번 들러를 사용하는 이유에 대해서는 너무 오래 언급하지 않았습니다. 그 주제는 이전에 확실히 다루었 기 때문입니다. 그러나 다음은 이러한 도구를 사용할 때 얻을 수있는 이점에 대한 기본 요약입니다.

  • 스크립트 또는 스타일 시트가 결합되어 앱에 HTTP 요청이 줄어 듭니다.
  • 스크립트 및 스타일 시트를 요청시로드하여 성능을 더욱 향상시킬 수 있습니다.
  • 더 적은 킬로바이트를 사용자에게 제공하기 위해 스크립트 및 스타일 시트를 자동으로 축소 할 수 있습니다
  • 번들링 및 축소 작업은 도구에 의해 자동으로 수행되므로 수동 작업이 최소화됩니다.
  • 개발 파일은 모듈 식으로 구성되므로 코드를 훨씬 쉽게 유지 관리 및 디버깅 할 수 있습니다.

보시다시피 이점은 많으며 주로 성능 및 프로젝트 유지 관리와 관련이 있습니다. 번 들러를 사용해야 할 이유가 많이 있습니다. 아직 고려하지 않은 것이 있다면.

그렇게하지 않으면 Parcel.js를 시작하고 실행하기위한 기본 사항을 시작하겠습니다. 이 튜토리얼에서는 쉽게 따라 할 수있는 몇 가지 간단한 예제를 사용하여 기능을 천천히 살펴 보겠습니다..

Parcel.js 설치

Yarn 또는 npm을 사용하여 터미널에 Parcel.js를 설치할 수 있습니다. 이 튜토리얼에서는 npm을 사용하겠습니다. 모든 프로젝트에서 사용할 수 있도록 전역으로 설치하는 명령은 다음과 같습니다.

npm 설치 소포 번 들러 -g

-g 플래그는이를 전역으로 설치합니다. 단일 프로젝트에만 설치하고 package.json의 프로젝트 devDependencies에 추가하려면 -g 대신 –save-dev 플래그를 사용하여 프로젝트의 루트 폴더 내에서 동일한 명령을 실행할 수 있습니다.

npm install parcel-bundler –save-dev

전역 설치 (가장 일반적인 사용 사례)에서는 init 명령을 사용하여 지정된 프로젝트를 시작할 수 있습니다. 터미널을 사용하여 응용 프로그램의 루트로 사용하려는 폴더로 이동 한 후 다음을 실행하십시오.

npm init -y

-y 플래그는 설정의 기본값을 사용하여 npm이 질문을하지 못하게합니다. 내 프로젝트가 parcel-demo라고 가정하면 루트에 다음과 같은 package.json 파일이 생성됩니다.

{
"이름": "소포 데모",
"버전": "1.0.0",
"기술": "",
"본관": "index.js",
"스크립트": {
"테스트": "에코 \"오류 : 지정된 테스트가 없습니다 \" && 1 번 출구"
},
"키워드": [],
"저자": "",
"특허": "ISC"
}

npm에 대한 지식이 부족하여 위의 혼란을 발견하면 내 포괄적 인 정보를 확인할 수 있습니다. npm에 대한 튜토리얼. 프런트 엔드 웹 개발자가 도구를 이해하도록 돕는 데 중점을 둡니다..

파일 진입 점 만들기

기본 프로젝트 설정을 위해 index.js라는 기본 JavaScript 파일 (package.json 파일에 표시됨)을 가리키는 index.html 파일에서 Parcel.js를 사용하겠습니다. 이 HTML 파일은 내 소포 진입 점 역할을합니다. 내 HTML 파일에는 내 JavaScript 파일을 가리키는 스크립트 요소가 있으므로 다음과 같이 보일 것입니다.

html>
<html>
<머리>
<표제>소포 데모 타이틀>
머리>
<신체>
<스크립트 src ="./js/index.js">스크립트>
신체>
html>

올바른 HTML 파일과 JavaScript 파일이 있으면 프로젝트 폴더 내의 터미널에서 다음을 실행하여 Parcel의 내장 개발 서버를 시작할 수 있습니다.

소포 index.html

서버를 시작하고 진입 점으로 사용할 파일을 알려줍니다. 결과적으로 터미널 세션에 다음 메시지가 나타납니다.

http : // localhost : 1234에서 실행중인 서버
√ 887ms 내장.

브라우저에서 http : // localhost : 1234 /를 열어 지금까지 구축 한 것을 볼 수 있습니다. 라이브 서버는 라이브 리로드와 핫 모듈 교체. 이렇게하면 전체 페이지를 새로 고치지 않고도 페이지의 모듈이 자동으로 업데이트됩니다. 이렇게하면 작업하면서 빌드 진행률을 더 빠르게 볼 수 있습니다..

서버가 활성화 된 상태에서 Parcel.js를 실행하면 파일을 변경할 때마다 파일을 변경하면 자동으로 앱이 다시 빌드됩니다. 이 작업을 확인하기 위해 스크립트에 간단한 콘솔 로그 줄을 추가하겠습니다. 터미널에서 다음과 같은 메시지가 나타납니다.

$ 소포 index.html
http : // localhost : 1234에서 실행중인 서버
√1.08 내장.
√ 28ms 내장.

각“Built…”줄은 하나의 빌드를 나타내며 컨텐츠의 변경 및 저장에 의해 트리거됩니다.

Parcel의 내장 개발 서버가 아닌 자체 서버를 사용하려면 watch 명령을 사용할 수 있습니다.

소포 시계 index.html

Parcel.js가 내 앱을 빌드 한 다음 변경을 기다리는 동안 터미널 세션에서 동일한 결과를 얻습니다.

$ parcel watch index.html
√ 855ms 내장.

dist / 폴더

감시 모드 나 내장 서버를 통해 Parcel.js를 시작한 후 프로젝트 폴더를 살펴보면 다음과 같은 폴더 및 파일 구조가 표시됩니다.

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

자동으로 생성 된 dist 폴더를 확인하십시오. 이것은 내 프로덕션 파일이있는 곳입니다. 이 파일들 중 어느 것도 만지지 않습니다. 필자의 Parcel 빌드는 index.js 파일을 고유 한 캐시 친화적 버전 (개정 또는“개정 된”파일 이름)으로 변환합니다. 소스 맵 파일도 추가되었습니다 (소스 맵에 대해 읽을 수 있음) 이 포스트에서).

dist 폴더 안의 index.html 파일을 보면 다음과 같은 내용이 표시됩니다.

html>
<html>
<머리>
<표제>소포 데모 타이틀>
머리>
<신체>

<스크립트 src ="/js.00a46daa.js">스크립트>
신체>
html>

내 index.html 파일의 dist 버전이 내 .js 파일의 dist 버전을 정확하고 편리하게 가리 킵니다..

내 웹 사이트에 동일한 스크립트를 가리키는 여러 파일 (예 : about.html, contact.html 등)이 포함 된 경우 다음 명령을 사용할 수 있습니다.

소포 index.html about.html contact.html

이것은 Parcel에게 여러 진입 점을 사용하여 빌드하고 싶다고 알려줍니다. 다음 명령을 사용하여 Parcel.js가 모든 HTML 파일을 진입 점으로 사용하도록 지시 할 수 있습니다.

소포 * .html

Babel과 함께 Parcel.js 사용

Parcel.js는 다음을 포함하여 다양한 코드 변환기를 기본적으로 지원합니다. 바벨, 최신 차세대 JavaScript를 모든 브라우저에서 이해할 수있는 동등한 코드로 변환하는 데 널리 사용되는 도구입니다. Babel은 Parcel.js에 내장되어 있으므로이를 사용하기 위해 특별한 플러그인이 필요하지 않습니다. 예를 봅시다.

index.js 파일에 다음 코드를 추가하겠습니다.

getInfo 함수 (이름, 연도 = 2018, 색상 = ‘파란색’) {
console.log (이름, 연도, 색상);
}

getInfo ( ‘Chevy’, 1957, ‘그린’);
getInfo ( ‘벤츠’, 1975);
getInfo ( ‘혼다’);

이 코드는 ES6 기능을 사용합니다. 기본 매개 변수, 기능 헤드에서 구체적으로 볼 수 있습니다. 오래된 브라우저는 기능에 대한 기본 매개 변수를 지원하지 않습니다. 코드에서 오류가 발생하지 않도록하려면 모든 브라우저에서 작동하는 동등한 코드로 코드를 변환해야합니다. index.js 파일을 저장하면 Parcel.js가 내 앱을 다시 빌드하고 내가 작성한 ES6 코드 대신 다음을 생성합니다.

getInfo (이름) {
var year = arguments.length > 1 && 인수 [1]! == undefined? 인수 [1] : 2018;
var color = arguments.length > 2 && 인수 [2]! == undefined? 인수 [2] : ‘blue’;
console.log (이름, 연도, 색상);
}

getInfo ( ‘Chevy’, 1957, ‘그린’);
getInfo ( ‘벤츠’, 1975);
getInfo ( ‘혼다’);

Babel의 온라인 리플을 사용하여 이것을 테스트.

그리고 여기서 가장 중요한 요소에 주목하십시오. Babel을 설치하거나 구성하기 위해 아무 작업도하지 않았습니다. Parcel의 기본 설정의 일부로 기본적으로 작동합니다! 물론 Babel을 변경하여 원하는 작업을 수행하도록 구성 옵션을 추가 할 수도 있습니다. 이 경우 구성 기본 설정을 포함하여 프로젝트의 루트 폴더에 .babelrc 파일을 추가 할 수 있습니다. 자세한 내용을 읽을 수 있습니다 .babelrc 파일 사용 Parcel.js 웹 사이트에서.

Sass와 함께 Parcel.js 사용

Babel과 마찬가지로 Parcel은 기본적으로 SCSS (Sass) 파일을 유효한 CSS로 자동 컴파일합니다. 이를 설명하기 위해 예제 프로젝트의 루트에 “css”라는 폴더를 추가하겠습니다. 해당 폴더에 다음 Sass 코드와 함께 style.scss 파일을 추가하겠습니다.

신체 {
검정색;

.모듈 {
색깔 : 빨강;
}
}

Sass의 선택기 중첩 기능을 사용하고 있습니다. HTML 파일 섹션에 다음 줄을 추가하겠습니다.

<링크 rel ="스타일 시트" href ="./css/style.scss">

모든 파일이 저장되면 Parcel은 SCSS를 다음과 같이 변환 한 컴파일 된 CSS 파일로 dist / 폴더에 새로운 빌드를 생성합니다.

신체 {
검정색;
}
body .module {
색깔 : 빨강;
}

Sass를 전 세계적으로 시스템에 설치 한 경우 Parcel은 구성없이 자동으로이를 수행합니다. 전 세계적으로 Sass를 설치하지 않아도 문제 없습니다. SCSS를 작성하고 Parcel을 시작하면 Pars가 Sass를 프로젝트 별 종속성으로 자동 설치합니다. 매우 편리합니다! 다시 구성 할 필요가 없으므로 특히 유용합니다..

그리고 Babel과 마찬가지로 Sass와 함께 제공되는 기본 구성 옵션을 선택할 수 있습니다. 또는 프로젝트 루트에 .sassrc 파일을 만들어 추가 할 수 있습니다 내 자신의 구성.

Parcel을 사용하여 여러 스크립트 번들링

지금까지 내가 보여 드린 예제는 Parcel을 시작하고 실행하는 것이므로 작동 방식에 대한 기본 아이디어를 얻을 수 있습니다. 앞에서 언급했듯이 번 들러의 강력한 기능은 여러 파일을 단일 파일로 자동 결합하는 기능입니다. 이를 통해 HTTP 요청을 줄이고 웹 사이트 또는 앱의 속도를 향상시킬 수 있습니다.

지금까지 설명한 모든 내용은 ES6의 모듈 기능을 사용하여 가져온 여러 스크립트를 사용하여 수행 할 수 있습니다. 이를 통해 모듈 방식으로 스크립트를 작성하고 가져올 수 있습니다. 이렇게하면 프로덕션에서 단일 번들 스크립트 만 제공하면서 코드를 쉽게 유지할 수 있습니다..

이를 입증하기 위해 다음 JavaScript를 포함 할 module.js라는 별도의 파일을 추가하겠습니다.

내보내기 let color = ‘green’;

내보내기 기능 add (n1, n2) {
리턴 n1 + n2;
}

이것은 변수와 함수라는 두 객체를 내보내는 기본 코드입니다. index.js 파일에서 다음 코드를 사용하여 이러한 리소스를 가져옵니다.

가져 오기 {색상, 추가} from ‘../js/module.js’;

console.log (컬러); // "초록"
console.log (add (20, 40)); // 60

다시 말하지만 이것은 기본 ES6 모듈 구문입니다. 여기서 어떻게 작동하는지 자세히 설명하지 않겠습니다. 이것에 대한 아름다운 부분은 내가 모듈을 사용하고 있다는 것을 HTML 파일에 지정할 필요가 없다는 것입니다. 일반적으로 스크립트 속성은 type 속성이 module로 설정된 상태입니다.

<스크립트 src ="./js/index.js" 유형 ="구성 단위">스크립트>

그러나 이것은 필요하지 않습니다. Parcel은 가져올 모듈을 인식하고 두 개의 스크립트를 하나의 성능 친화적 인 리소스로 묶습니다. 이것은 특별한 구성이나 플러그인없이 발생합니다. 이전 예제와 마찬가지로 코드는 Babel을 사용하여 ES5와 동등한 코드로 변환되어 가장 브라우저를 지원합니다..

Parcel.js로 코드 분할

구성없이 작동하는 Parcel의 또 다른 기능은 코드 분할. 경우에 따라 모든 모듈을 모든 페이지에로드하려고합니다. 그러나 다른 경우에는 특정 컨텍스트에서 특정 페이지에만 특정 모듈을로드 할 수 있습니다. 이것이 코드 분할로 할 수있는 일입니다..

앞에서 필자의 예제 프로젝트에는 index.html, about.html 및 contact.html의 세 페이지가 포함되어 있다고 언급했습니다. 세 페이지 모두에서 동일한 JavaScript 번들을 실행하려고하지만 about.html 페이지에는 특정 항목을 트리거하는 버튼이 있습니다. 하지만 버튼을 누를 때만 코드를로드하고 싶습니다..

코드 분할 기능을 사용하여 해당 코드를 표시하는 방법은 다음과 같습니다.

if (document.querySelector ( ‘. about’)) {
document.querySelector ( ‘. about’). addEventListener ( ‘click’, () => {
import ( ‘../ js / about.js’). then (
document.body.innerHTML + = ‘업데이트 된 페이지 정보’;
);
});
}

이것은 새로운 JavaScript 기능을 통합하고 있습니다, 동적 수입 import () 함수 사용 이를 통해 특정 인스턴스에서 원하는 코드를 동적으로로드 할 수 있습니다. 이 경우 정보 페이지에서 버튼을 누르면됩니다. import () 기능은 promise를 반환하므로 .then () 절 내에서 원하는 모든 작업을 수행 할 수 있습니다. 가져온 스크립트가로드되면 트리거됩니다. about.js 스크립트는 요청시로드되며이 코드는 Babel에서 브라우저 간 ES5로 변환되어 모든 곳에서 작동합니다. 내 번들을 만들면 about.js 부분이 dist / 폴더 안에 자체 파일에 저장되어 필요할 때이 파일을로드 할 수 있습니다.

앞에서 설명한 다른 기능과 마찬가지로 import () 기능은 구성없이 Parcel에서 작동합니다..

Parcel.js로 프로덕션 빌드

지금까지 필자는 Parcel과 함께 제공되며 라이브 리로드가 포함 된 내장 서버를 사용하여 모든 소포 빌드를 즉석에서 제작했습니다. 프로젝트를 저장할 때마다 번들이 빌드됩니다. 그러나 코드는 지속적인 개발을 위해 항상 번들로 제공됩니다. 이 방법으로 디버깅을 수행하는 데 필요한 소스를 보거나 검사 할 수 있습니다.

프로젝트가 완료되어 라이브 서버로 푸시 될 준비가되면 Parcel이 내 프로젝트를 보지 못하게 할 수 있습니다. 터미널의 CTRL-C는 많은 플랫폼에서이를 수행합니다. 그런 다음 다음 명령을 실행하여 Parcel에게 하나의 최종 빌드를 생성하도록 지시합니다.

소포 빌드 index.html about.html contact.html

이 경우에는 세 개의 입력 파일을 모두 사용하고 있습니다. 이 작업이 완료되면 Parcel은 더 이상 변경을 기다리지 않습니다. 마지막 번들이 완성되었습니다. 빌드가 마무리되는 것 외에도 필자의 코드는 Parcel에서 생산할 준비가되었습니다. 최적화 된 성능을 위해 가능한 가장 작은 파일을 생성하도록 HTML, CSS 및 JavaScript가 모두 축소되었습니다..

소포 사용의 단점?

빌드 도구에 대한 경험이 거의 없거나 전혀없는 사람들에게는 소포가 반드시 선택해야합니다. 하지만 내 연구에서 앞으로 개선해야 할 몇 가지 사항을 발견했습니다..

우선, Parcel은 번들 스크립트와 스타일 시트를 항상 진입 점 HTML 파일과 동일한 디렉토리에 배치합니다. CSS와 JavaScript 파일이 별도의 폴더에있는 경우에도 마찬가지입니다. 이것들은 프로덕션 파일이기 때문에별로 중요하지 않을 수 있습니다. 하지만 명심해야 할 것이 있습니다. 좋은 소식은 이것입니다 수정 된 것 같습니다 다가오는 Parcel 버전 2 (여전히 Alpha)에서. 따라서 해당 버전의 Parcel이 안정적 일 때이 동작을 무시할 수있는 방법이 있어야합니다 (현재 안정 버전은 1.12.4 임)..

또 다른 단점은 다른 기능에 대한 구성 옵션 사용자 정의에 대한 정보와 관련하여 Parcel 문서가 매우 적다는 것입니다. Parcel의 가장 큰 장점 중 하나는 기본적으로 얼마나 잘 작동 하는가입니다. 그러나 사용자 정의에 대한 더 광범위한 문서가 유용 할 것이라고 생각합니다. 예를 들어 CSS 및 JavaScript 축소를 유지하면서 빌드에서 HTML 축소를 어떻게 비활성화합니까? 문서에 설명이 없습니다. GitHub에서 닫힌 문제를 살펴보면 해결 방법 (매우 편리하지 않다고 생각했습니다).

결론

마지막으로 언급 할 것은 앱 만들기, Parcel의 구성 파일을 자동으로 생성하는 데 사용할 수 있습니다. JavaScript 라이브러리, 트랜스 파일러, 린터 등을 선택할 수 있으며, 모두 초기화 할 수 있도록 package.json 파일에 추가됩니다..

Parcel.js에서 앱 만들기

이것이 초보자를위한이 소포 튜토리얼입니다. 이 정보를 사용하여 Parcel을 신속하게 시작하고 향후 프로젝트에서 사용할 수 있기를 바랍니다. 앱 번들링을 처음 사용하거나 프로젝트에서 시도한 적이없는 경우이 소개를 통해 Parcel을 사용해 볼 수 있습니다..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃 및 프리젠 테이션.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    워드 프레스 사이트가 기능을 수행하는 방식을 바꾸는 10 가지 방법 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부] כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    GTmetrix 속도 테스트 도구를 사용하는 방법 + WordPress에서 GTmetrix PageSpeed ​​점수 향상 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    Adblock
    detector