[ Node.js ] 번들러 - Parcel (소/중형 프로젝트)

번들러(bundler)

개발시 SASS , vue , react ,svg ,... 등의 기능들을 이용해 작업을 하는데, 실제로 웹에서 동작하지는 않기 때문에 번들러를 통해 변환하는 과정으로 웹 (HTML / CSS/ JS)에서 사용된다.

ex ) sass = > package ( 번들러 sass 설치 ) = > css로 변환

• parcel : 구성 없는 단순한 자동 번들링 (소/중형 프로젝트에 적합)
• webpack : 매우 꼼꼼한 구성 (중/대형 프로젝트에 적합)

 

1. parcel bundler 설치

터미널에서 번들러 설치

npm i -D parcel-bundler

 

2. Parcel - 정적 파일 관리 추가하기

파비콘등 이미지의 정적 파일들을 dist 폴더로 자동으로 넣어주는 기능 추가하기

 

2-1. npm 기능 추가

npm install -D parcel-plugin-static-files-copy

parcel-plugin-static-files-copy

 

2-2. package.json 에서 옵션 추가

위의 모듈을 설치한 후 패키지 파일을 확인하면, devDependencies에 parcel-plugin-static-files-copy가 추가된 것을 확인 할 수 있다.

staticFiles 을 추가하여 정적 파일의 경로를 추가 자동으로 dist 폴더에 관리 할수 있도록 설정해준다.

📑package.json

{
  "name": "psrcel-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "sass": "^1.65.1"
  },
  "staticFiles" : {
    "staticPath":"static"
  }
}

2-3. 실제 폴더 생성 및 파비콘추가 확인하기

폴더 경로에 파일 추가 => npm run dev 실행 => dist폴더 하위에 favicon.ico 파일이 추가 생성 된다.

 

 

3. 공급업체 접두사 (Vender Prefix)

display : flex;
display : webkit-box;
display : ms-flexbox;

공급업체 접두사란 웹 표준 이아닌 특정 브라우저에서 사용가능한 접두사 css기술이다 .

위와 같은 접두사들을 각각 외워서 사용하기 어려울 수 있어 자동으로 생성해주는 모듈(패키지)이 있다.

 

3-1.모듈 설치

npm i -D postcss autoprefixer

• postcss
• autoprefixer

두개의 패키지를 설치해준다.

 

3-2.package.json 에서 ' browerslist' 옵션 추가

browerslist 옵션은 현제 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도.

명시된 내용을 Autoprefixer패키지가 활용하게된다.

설정 내용

• "> 1%" : 전세계 점유율이 1% 이상인 모든 브라우저
• "last 2 versions" : 해당 브라우저들의 두개의 버전을 보유

📑 package.json

{
  "name": "psrcel-template-basic",
      ...
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "postcss": "^8.4.27",
    "sass": "^1.65.1"
  },
  "staticFiles": {
    "staticPath": "static"
  },
  "browerslist":[
    "> 1%",
    "last 2 versions"
  ]
}

 

3-3. ' .postcssrc.js'파일 생성

※rc(Runtime Configuration 의 약어)가 붙은 파일로 구성파일을 의미

• ESM - 브라우저에서 사용
  • 가져오기 : import
  • 내보내기 :export
• CommonJs - 번들러를 통한 node.js 방식
  • 가져오기 : require()
  • 내보내기 : module.exports

📑 .postcssrc.js

// 가져오기 : import autoprefixer from 'autoprefixer'
const autoprefixer = require('autoprefixer');


// 내보내기 : export{Plugins:[autoprefixer]}
module.exports = {
    Plugins:[
        autoprefixer
    ]
}

위의 코드를 간소화 (명칭 지정 없이 바로 가져와서 내보내기)

module.exports = {
    Plugins:[
        require('autoprefixer')
    ]
}

 

 

4. babel

※ 자바스크립트 표준 = ECMScript = ES

ECMScript 2015(최신 ES6) 코드를 이전 Javascript 엔진(구형 버전)에서 실행할 수 있도록 이전 버전과 호환되는 javascript 버전으로 변환하는데 사용되는 무료 컴파일러.

 

4-1.모듈 설치

npm i -D @babel/core @babel/preset-env

• @babel/core
• @babel/preset-env

두개의 패키지를 설치해준다.

 

4-2. ' .babelrc.js'파일 생성

📑 .babelrc.js

module.exports= {
    presets : ['@babel/preset-env']
}

 

4-3.package.json 에서 ' browerslist' 옵션 추가

위의 Vender Prefix에서 설정과 동일하다. 한번 설정했을시 추가할 필요 없음.

설정 내용

• "> 1%" : 전세계 점유율이 1% 이상인 모든 브라우저
• "last 2 versions" : 해당 브라우저들의 두개의 버전을 보유

4-4 . javascript async / await 사용을 위한 모듈 추가 설치

npm i -D @babel/plugin-transform-runtime

4-5. ' .babelrc.js'파일 추가 설정 생성

📑 .babelrc.js

module.exports= {
    presets : ['@babel/preset-env'],
    Plugin : [
        ['@babel/plugin-transform-runtime']
    ]
}

 

 

5. Parce CLI 옵션 확인하기

https://ko.parceljs.org/cli.html

🖥 커맨드 라인 인터페이스(CLI)