📌Bundler

---

이미지출처

기본적으로 제공되는 HTML, CSS, JS 같은 것들로만은 실질적으로 웹에서 동작할 수 있는 형태를 만들기에는 어려움이 있습니다. 그렇기 때문에 우리는 다양한 외부 프로그램(Sass, Vue, React...)을 사용하게 됩니다.이런 외부프로그램들을 우리는 Bundler 를 통해 HTML, Css, Js 에서 사용을 할 수 있습니다.
하지만 Bundler 자체에서 변환을 시켜주는 것이 아니고 Bundler 가 외부 패키지(uue-template-compiler, typlescript ...)의 도움을 받아서 변환을 시켜주는 것 입니다.
Bundler 가 없으면 우리가 외부 프로그램에 필요한 외부 패키지(설치파일) 을 수동으로 설치해야하는데 bundler 가 존재함에 있어 우리가 해야 할 일을 bundler 가 대신 해주는 역할입니다.

1. Parcel bundler

• 초보자 친화적: 설정 파일이 거의 필요 없어서 처음 사용하는 사람도 쉽게 사용할 수 있음
• 빠른 빌드: 자체적으로 파일을 감지하고 필요한 만큼만 업데이트해서 빠르게 빌드함
• 기본 제공 기능: 대부분의 기능이 기본으로 제공되므로 추가적인 설정이 많이 필요 없고, 바로 사용할 수 있음

2. WebPack bundler

• 유연한 설정: 다양한 플러그인과 설정을 통해 거의 모든 종류의 프로젝트에 맞게 커스터마이징 가능함
• 강력한 기능: 많은 기능을 제공해서 복잡한 프로젝트에도 잘 맞음
• 학습 곡선: 설정이 복잡해서 처음에는 배우기가 조금 어려울 수 있음

3. RollUp bundler

• 모듈 중심: 특히 ES6 모듈을 다루기에 좋아. 즉, 최신 자바스크립트 표준을 지원함
• 경량화: 최소한의 코드로 빌드해서 결과물이 가볍고 효율적
• 라이브러리 제작에 유용: 주로 작은 규모의 코드나 라이브러리 제작에 최적화되어 있음

🔥 차이점을 한눈에 보기

특징	Parcel	Webpack	RollUp
설정 필요성	거의 없음	복잡한 설정 필요	설정 필요
빌드 속도	빠름	보통	보통
기능	기본 제공 기능 풍부함	다양한 플러그인	ES6 모듈에 최적화 되어있음
사용 용도	초바자, 간단한 앱	복잡한 웹 앱	모듈, 라이브러리

---

📌 Parcel bundler 사용 방법

자세한 설명은 사이트 에 나와있습니다!

• package.json 파일 생성 (npm init -y)

• bundler 설치 (npm i -D parcel-bundler) // -D : 의존성 파일

• package.json 파일 수정

  • 기존에 있던 scripts 를 없애고 수정해준다.

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

• index.html 에 (link)maim.scss 파일을 연결한다.
• 사용할 파일을 가지고 온 뒤, main.scss 위에 (link) 파일을 연결한다. (순서 주의)
  reset-css
• main.acss 작성

$color--black: #000;
$color--white: #fff;

body {
	background-color: $color--black;
  	h1 {
    	color: $color--white;
    }
}

---

우리는 parcel bundler 를 설치한 이후 부터, 작성한 모든 파일들은 dist 폴더 안으로 내용이 변환되어 들어가집니다. 이 때 주의해야 할 점은 dist 폴더에 우리가 사용할 파일들을 직접적으로 넣으면 안된다는 점입니다.

• 우리가 만든 파일을 자동으로 dist 폴더에 이동되도록 파일을 설치 해줍니다.
  (npm i -D parcel-plugin-static-files-copy)
  npm

• package.json 파일 수정

  • 맨 아래쪽에 있는 곳을 수정해줍니다.

  },
  "staticFiles": {
      "staticPath": "static"
  }
} // 맨 뒤

• 원하는 파일 (예시: favicon.ico) 을 static 폴더를 생성(수동)한 후 드래그해서 넣어준다.

---

• 모듈 설치
  • npm i -D postcss autoprefixer ( 모듈 두가지 설치)
• Package.json 파일 수정
  맨 밑 부분에 작성해줍니다. (staticFiles 아래)
  • "browserslist": [
    "> 1%",
    "last 2 versions"
    ]
• 새로운 파일 생성
  • .postcssrc.js
    • 기본적으로 브라우저는 ESM 을 사용하고 nodejs 는 Common Js 를 사용함
    • node js 는 import 와 export 를 지원하지 않음
    • import → require()
    • export → module.exports

// export { plugins: [autoprefixer]} 과 같은 것
module.exports = {
	plugins: [
    	require('autoprefixer') // const 선언 안해주고 바로 쓸 수 있음
    ]
}

• npm run dev 로 확인
  terminal 을 x 로 꺼줬다면, 모든 파일을 수정할 때마다 run dev 해줘야함 (그냥 내려놓으면 상관없음)
  가끔 버전이 맞지 않는다고 error 메세지가 뜨면 package.json 에서 버전을 확인 후에 terminal 에서 버전을 다시 받아주면 됨
  • npm i -D autoprefixer@9 (9버전을 받겠다)

---

babel

우리는 ESscript 를 현재 최신 버전인 ES6~8 을 사용하고 있는데요, babel 을 통해서 구버전 (ES5) 에서도 사용할 수 있도록 변환시켜주는 역할을 해줍니다.

• babel 설치
  npm i -D @babel/core @babel/preset-env
• 새로운 파일 생성
  .babelrc.js

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

• package.json 파일 수정
  .postcssrc.js 를 설치한적이 있다면 이미 browserslist 를 작성해놨을거라서 별로의 수정이 필요하지않고, 설치한적이 없다면 작성해주면 됩니다.

• npm i -D @babel/plugin-transform-runtime 설치
  기본적으로 babel 은 async (js 문법) 을 지원하지 않기때문에 따로 설치해줘야합니다.

• .babelrc.js 파일 수정

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

• main.js 파일 수정

async function test() {
	const promise = Promis.resolve(123)
    console.log(await promise)
}
test() // 123

---

🔥 package.json 을 통한 live server 이용하기

• npm run dev
  • server running at [주소]