Jacob Ko

Jacob Ko

Everything is Awesome 👍

Parcel

Updated:

Parcel

1.Parcel bundler 개념

🔶 Bunbler 란?

  • 다양한 기능을 가지고 있는 Package 를 통해서 웹을 개발하는데 정작, 웹 구동에는 HTML, CSS, JS 만 사용이 됩니다.

  • 그래서 중간에서 Complie 을 해야되는데 Package 들을 묶어서 한꺼번에 Complie 시키는 것이 Bunlder 의 주요 특징입니다.

  • 다양한 Pacakge (예: Vue, React, SASS, TS, Barbel 등) 을 통해서 웹개발 하는데, 필요한 외부 Complier 를 bunlder 에 담아서 연결해줘서 한번에 complie 시킴니다.

Parcel vs Webpack

33

2.Parcel bunder 설치

$ npm init -y # npm 설치
$ npm i -D parcel-bundler # 개발 의존성 parcel-bundler 설치
# package.json 에서 설치 확인

// in package.json
  "scripts": {
    "dev": "parcel index.html", // localhost 환경 연결
    "build": "parcel build index.html" // 최종 build 환경 연결
  },

3.정적 파일 연결

  • 예시 파일로 Jacob’s Dev 의 favicon 을 연결해 보겠습니다.

jacob's devlog

PNG to ICO online ICO converter

  • Parcel bundler 로 complie 하면 dist 폴더에 complie 된 파일들이 저장 되는데, favicon 을 직접 dist 폴더에 넣어줘서 연결 하는것은 권장 되지 않습니다. (왜냐면.. dist 폴더는 complie 할 때마다 파일이 변경되는 임시 폴더 성격이 있기 때문에 자동으로 넣어 줄수 있는 parcel-bundler package 를 사용하는것이 권장됨)

parcel-plugin-static-files-copy

# parcel-plugin-static-files-copy 설치
$ npm install -D parcel-plugin-static-files-copy

// in package.json
"staticFiles": {
  "staticPath": "static"
}

  • root 경로에 static 폴더를 생성하고, 그안에 favicon.ico 파일을 넣어 줍니다.

  • $ npm run dev 하면 dis 폴더 경로에 자동으로 static 폴더에 있는 파일들을 complie 시 넣어 줍니다.

4.autoprefixer

🔷 Vendor Prefix 란?

  • css3의 기능은 웹표준이 아니였습니다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다 원하는 화면을 출력하는데 제한적입니다.

  • vender prefix 는 새로운 기능을 모두 제공해야 할 때 변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다

image

  • CSS 스타일 부분에 앞에 붙이는 것을 공급 업체 접두사(Vender Prefix) 각각의 속성 부분에 자동으로 붙여주는 기능이 autoprefixer 입니다.

  • postcss 와 autoprefixer 설치

$ npm i -D postcss autoprefixer
  • browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다. 그 명시를 Autoprefixer 패키지가 활용하게 됩니다.
// in package.json
  "browerslist" : [
    "> 1%",  // 전세계 1퍼센트 이상의 브라우저 중에
    "last 2 versions" // 마지막 2개 버전 까지는 지원을 하겠다는 의미 임
  ]

  • 즉, vendor prefixer 를 각 브라우저 공급업체의 범위를 정해줘야 사용이 가능합니다.

  • root 경로에 .postcssrc.js 라는 파일을 생성 해 줍니다. (뒤에 rc는 Runtime Configuration 의 약어 - 붙은 파일은 구성 파일을 의미합니다)

// in .postcssrc.js

// ESM (ECMA modules) 에서는 import export 를 통해서 가져오기 내보내기를 함
// node.js 에서는 CommonJS 방식을 사용

// import autoprefixer from 'autoprefixer'

// const autoprefixer = require('autoprefixer')  JS 파일을 node 환경에서 외부에서 가져오는 명령어
// 따로 변수를 사용하지 않고 아래와 같이 붙여서 사용할 수 있음

/* export {
  plugins: [
    autoprefixer
  ]
} */

module.exports = {
  // JS 파일을 node 환경에서 외부에서 내보내는 명령어
  plugins: [require("autoprefixer")],
};

  • 작성후에 npm run dev 하면 error 발생 -> PostCSS plugin autoprefixer requires PostCSS 8.

  • postcss 와 autoprefixer 의 버전이 안맞아 충돌하는 현상입니다. autoprefixer 의 버전을 downgrade 해서 postcss 와 맞춰서 사용합니다.

$ npm i -D autoprefixer@9 # 9버전으로 다운그래이드
  • 예시로 최신 기술로 display:flex; 적용하면 자동으로 vendor prefixer 가 붙는것을 확인 할수 있습니다.

5.Babel

babel official site

  • Babel은 ECMA Script2015 (EC6) 이후 버전의 코드를 이전 JS 엔진에서 실행할 수 있게 이전 버전으로 변환하는데 주로 사용되는 JS trans complier 입니다.

  • 예) EC6 이후에서 지원되는 arrow function 을 babel 을 통해서 EC5 이하 버전에서 해석할 수 있게 function type 으로 변환 됩니다.

image

babel 설치

  • babel core, babel preset-env 2개의 package 설치 (개발 의존성 버전)
$ npm i -D @babel/core @babel/preset-env
  • root 경로에 .babelrc.js 파일 생성 합니다.
// in .babelrc.js

module.exports = {
  // preset-env module 내보내기
  presets: ["@babel/preset-env"],
};

  • 위의 설정을 하게 되면 앞으로 생성되는 JS 파일은 ES5로 자동 변경되어서 브라우저에서 동작 하게 됩니다.

  • 📌 마지막 작동 전에 확인사항!! : package.json 에 browerslist 가 세팅 되어있어야 babel 이 작동 합니다. (autoprefixer, postcss 가 이미 설치 되어 있을 경우 browerslist 가 작성되어 있으니 확인만 하고 넘어가도 됩니다.)

babel async 비동기 함수 적용

  • bable core 기본 사항만으로 비동기 함수는 지원하지 않습니다. (추가로 plugin-tansform-runtime)

  • 예)

async function test() {
  // EC6 에서 부터 지원되는 비동기 함수
  const promise = Promise.resolve(123);
  console.log(await promise);
}

test();
  • 런타임 오류 발생

image

  • plugin-tansform-runtime 패키지 설치
$ npm i -D @babel/plugin-transform-runtime

// in .babelrc.js 에서 module export 세팅

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [["@babel/plugin-transform-runtime"]],
};
  • async 정상 작동 확인 image

6.CLI

Parcel CLI - Command line interface

  • 유용한 몇가지 CLI 명령어

    • 개발용 서버 빌드 - parcel index.html

    • 제품용 에셋 빌드 - parcel build index.html

    • complie files output 변경 (default 는 dist 폴더) - parcel build entry.js --out-dir build/output

    • 포트 번호 변경 (기본값: 1234) - parcel serve entry.js --port 1111

    • 브라우저에서 열기 (complie 하고나서 바로 브라우저에서 열어서 확인 가능한 옵션 - default 는 비활성 되어 있음) - parcel entry.js --open

    • 빠른 모듈 교체 비활성화 (defalut: HMR 활성 - Hot Module Replacement 는 런타임에 페이지 새로고침 없이 수정된 내용으 ㄹ자동으로 갱신하는 방식을 말합니다.) - parcel entry.js --no-hmr

    • 파일시스템 캐시 비활성화 (defalut: 캐시 활성 - 캐시가 저장되어 있어서 load 시간이 빠르지만 가끔 cash 때문에 error 가 발생되기 도 하기 때문에 비활성 시킬 수 있음) - parcel build entry.js --no-cache

적용 예) Port number 변경

// in package.json

  "scripts": {
    "dev": "parcel index.html --port 8800",
    "build": "parcel build index.html"
  },

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy