Bunbler 개요

다양한 기능을 가지고 있는 Package 를 통해서 웹을 개발하는데 정작, 웹 구동에는 HTML, CSS, JS 만 사용이 됩니다.
그래서 중간에서 Complie 을 해야되는데 Package 들을 묶어서 한꺼번에 Complie 시키는 것이 Bunlder 의 주요 특징입니다.
다양한 Pacakge (예: Vue, React, SASS, TS, Barbel 등) 을 통해서 웹개발 하는데, 필요한 외부 Complier 를 bunlder 에 담아서 연결해줘서 한번에 complie 시킴니다.

Parcel 특징

  • 구성 없는 단순한 자동 번들링
  • 소/중형 프로젝트 적합

프로젝트 생성

정리 잘된 사이트 (참고)

내가올린 기본 Parcel 세팅 (gitHub)


npm init -y
npm install parcel-bundler -D

// dist 폴더에 자동으로 파일 업로드 하는 플러그인
npm install -D parcel-plugin-static-files-copy

// autoprefixer 플러그인 설치
npm i -D postcss autoprefixer
// 만약 에러뜨면 다운그레이드
npm i -D autoprefixer@9

// babel 플러그인 설치
npm i -D @babel/core @babel/preset-env
// 오류뜰시
npm i -D @babel/plugin-transform-runtime
        
        

package.json 에 추가하기


package.json 세팅
"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
// static 폴더에 넣으면 자동으로 dist 폴더로 복사함
// ex) 파비콘
"staticFiles": {
    "staticPath": "static"
  }

// autoprefixer, babel 위해서 세팅 해야함
  "browerslist": [
    "> 1%",
    "last 2 versions"
  ]
        
        

autoprefixer

구형 브라우저에서도 최신의 css 작동할수 있도록 도와주는 플러그인


npm i -D postcss autoprefixer
// 만약 에러뜨면 다운그레이드
$ npm i -D autoprefixer@9
        
        

package.json 에 추가하기


// 1% 이상 모든 브라우저 마지막2개 버전까지 지원 한다는 뜻
"browserslist": [
    "> 1%", 
    "last 2 versions"
  ]
        
        

root 경로 .postcssrc.js 에 추가하기


// import 불러오기
// import autoprefixer from 'autoprefixer'
const autoprefixer = require('autoprefixer');

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

위에 코드 간략하게


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

babel

구형 브라우저에서도 최신 코드 실행할수 있게 이전버전으로 변환해주는 플러그인


npm i -D @babel/core @babel/preset-env
// 오류뜰시
npm i -D @babel/plugin-transform-runtime
        
        

root 경로 .babelrc.js 에 추가하기


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

package.json 에 추가하기


"browerslist": [
  "> 1%",
  "last 2 versions"
]