🐠 λ³€ν™˜

λŒ€λΆ€λΆ„μ˜ λ²ˆλ“€λŸ¬λ“€μ΄ μ• μ…‹ λ³€ν™˜(transform)을 μœ„ν•œ ν”ŒλŸ¬κ·ΈμΈ μ„€μΉ˜μ™€ μ„€μ •(configuration)을 μš”κ΅¬ν•©λ‹ˆλ‹€. Parcel은 λ§Žμ€ 수의 일반적인 λ³€ν™˜κ³Ό 트랜슀파일러λ₯Ό λ‚΄μž₯ν•˜μ—¬ μ§€μ›ν•©λ‹ˆλ‹€. Babel을 μ‚¬μš©ν•˜λŠ” JavaScript, PostCSS을 μ‚¬μš©ν•˜λŠ” CSS, PostHTML을 μ‚¬μš©ν•˜λŠ” HTML을 λ³€ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Parcel은 λͺ¨λ“ˆ μ•ˆμ—μ„œ μ„€μ • 파일(예: .babelrc, .postcssrc)을 λ°œκ²¬ν–ˆμ„ λ•Œ μžλ™μœΌλ‘œ 이 λ³€ν™˜μ„ μ‹€ν–‰ν•©λ‹ˆλ‹€.

μ¨λ“œνŒŒν‹°(third-party) node_modulesμ—μ„œλ„ μž‘λ™ν•©λ‹ˆλ‹€. λ§Œμ•½ μ„€μ • 파일이 νŒ¨ν‚€μ§€μ˜ μΌλΆ€λ‘œ λ§Œλ“€μ–΄μ§€λ©΄ κ·Έ λ³€ν™˜μ€ ν•΄λ‹Ή λͺ¨λ“ˆμ—μ„œλ§Œ μžλ™μœΌλ‘œ μΌœμ§‘λ‹ˆλ‹€. 이것이 λ²ˆλ“€λ§μ„ λΉ λ₯΄κ²Œ ν•΄μ€λ‹ˆλ‹€. 였직 λ³€ν™˜μ— ν•„μš”ν•œ λͺ¨λ“ˆλ§Œμ΄ κ°€κ³΅λ˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. μ΄λŠ” λ˜ν•œ μ–΄λ–€ νŒŒμΌμ„ ν¬ν•¨ν•˜κ³  μ œμ™Έν•˜κΈ° μœ„ν•΄ μˆ˜λ™μœΌλ‘œ λ³€ν™˜μ„ ꡬ성할 ν•„μš”κ°€ μ—†μŒμ„ λœ»ν•©λ‹ˆλ‹€. μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ¨λ“œνŒŒν‹° μ½”λ“œλ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄ 그것이 μ–΄λ–»κ²Œ λΉŒλ“œ λ˜μ—ˆλŠ”μ§€ μ•Œ ν•„μš”κ°€ μ—†μŒμ„ μ˜λ―Έν•©λ‹ˆλ‹€.

Babel

Babel은 μ»€λ‹€λž€ ν”ŒλŸ¬κ·ΈμΈ ν™˜κ²½μ„ κ°–μΆ˜ μΈκΈ°μžˆλŠ” JavaScript νŠΈλžœμŠ€νŒŒμΌλŸ¬μž…λ‹ˆλ‹€. Parcel을 Babelκ³Ό ν•¨κ»˜ μ‚¬μš©ν•˜λŠ” 것은 λ…λ¦½ν˜•μœΌλ‘œ μ‚¬μš© ν•  λ•Œλ‚˜ λ‹€λ₯Έ λ²ˆλ“€λŸ¬μ™€ ν•¨κ»˜ μ‚¬μš©ν•  λ•Œμ™€ λ˜‘κ°™μ€ λ°©μ‹μœΌλ‘œ μž‘λ™ν•©λ‹ˆλ‹€.

ν”ŒλŸ¬κ·ΈμΈκ³Ό 프리셋을 앱에 μ„€μΉ˜ ν•˜μ„Έμš”:

yarn add babel-preset-env

κ·Έλ¦¬κ³ λ‚˜μ„œ, .babelrcλ₯Ό λ§Œλ“­λ‹ˆλ‹€:

{
  "presets": ["env"]
}

PostCSS

PostCSSλŠ” plugin을 μ‚¬μš©ν•˜μ—¬ CSSλ₯Ό λ³€ν™˜ν•˜λŠ” λ„κ΅¬μž…λ‹ˆλ‹€. autoprefixer, cssnext, CSS Modules와 같이 λ§μž…λ‹ˆλ‹€. .postcssrc (JSON), .postcssrc.js, λ˜λŠ” postcss.config.js 쀑 ν•˜λ‚˜μ˜ νŒŒμΌμ„ μž‘μ„±ν•˜μ—¬ Parcel둜 PostCSSλ₯Ό μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν”ŒλŸ¬κ·ΈμΈμ„ 앱에 μ„€μΉ˜ ν•˜μ„Έμš”:

yarn add postcss-modules autoprefixer

그리고 .postcssrcλ₯Ό λ§Œλ“­λ‹ˆλ‹€:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

ν”ŒλŸ¬κ·ΈμΈμ€ plugins 객체에 ν‚€λ‘œ μ§€μ •λ˜κ³  μ˜΅μ…˜μ€ 객체의 κ°’μœΌλ‘œ μ •μ˜ λ©λ‹ˆλ‹€. λ§Œμ•½ ν”ŒλŸ¬κ·ΈμΈμ— μ˜΅μ…˜μ΄ μ—†λ‹€λ©΄, λŒ€μ‹  true둜 μ„€μ •ν•˜μ„Έμš”.

Autoprefixer, cssnext 그리고 λ‹€λ₯Έ λ„κ΅¬μ˜ λŒ€μƒ λΈŒλΌμš°μ €λŠ” .browserslistrc둜 지정할 수 μžˆμŠ΅λ‹ˆλ‹€:

> 1%
last 2 versions

CSS Modules은 μ΅œμƒμœ„ modules ν‚€λ₯Ό μ‚¬μš©ν•˜μ—¬ μ•½κ°„ λ‹€λ₯Έ λ°©μ‹μœΌλ‘œ ν™œμ„±ν™” λ©λ‹ˆλ‹€. CSS Modules은 JavaScript λ²ˆλ“€μ— 포함될 객체λ₯Ό λ‚΄λ³΄λ‚΄λ―€λ‘œ Parcel둜 ν•˜μ—¬κΈˆ νŠΉλ³„ν•œ 지원을 ν•„μš”λ‘œ ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. postcss-modulesκ°€ ν”„λ‘œμ νŠΈ μ•ˆμ— μ„€μΉ˜λ˜μ–΄μ•Ό 함을 μ£Όμ˜ν•˜μ„Έμš”.

PostHTML

PostHTML ν”ŒλŸ¬κ·ΈμΈμœΌλ‘œ HTML을 λ³€ν™˜ν•˜κΈ° μœ„ν•œ λ„κ΅¬μž…λ‹ˆλ‹€. .posthtmlrc (JSON), posthtmlrc.js, posthtml.config.js 쀑 ν•˜λ‚˜μ˜ νŒŒμΌμ„ μž‘μ„±ν•˜μ—¬ Parcel에 PostHTML을 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν”ŒλŸ¬κ·ΈμΈμ„ 앱에 μ„€μΉ˜ ν•˜μ„Έμš”.

yarn add posthtml-img-autosize

κ·Έ ν›„, .posthtmlrc을 μž‘μ„±ν•˜μ„Έμš”.

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

ν”ŒλŸ¬κ·ΈμΈμ€ plugins 객체에 ν‚€λ‘œ μ§€μ •λ˜κ³  μ˜΅μ…˜μ€ 객체의 κ°’μœΌλ‘œ μ •μ˜ λ©λ‹ˆλ‹€. λ§Œμ•½ ν”ŒλŸ¬κ·ΈμΈμ— μ˜΅μ…˜μ΄ μ—†λ‹€λ©΄, λŒ€μ‹  true둜 μ„€μ •ν•˜μ„Έμš”.

TypeScript

TypeScriptλŠ” νƒ€μž…μ΄ μΆ”κ°€λœ JavaScript의 Superset μ–Έμ–΄λ‘œ, μ»΄νŒŒμΌν•˜λ©΄ 일반 JavaScript둜 λ³€ν™˜λ˜λ©° μ΅œμ‹  ES2015+ κΈ°λŠ₯듀도 μ§€μ›ν•©λ‹ˆλ‹€. TypeScript의 λ³€ν™˜ μž‘μ—…μ€ 좔가적인 μ„€μ • 없이 κ°€λŠ₯ν•©λ‹ˆλ‹€.

<!-- index.html -->
<html>
<body>
  <script src="./index.ts"></script>
</body>
</html>
// index.ts
import message from "./message";
console.log(message);
// message.ts
export default "Hello, world";