2021/06/25 Parcel-Bundler/Babel/PostCSS

Parcel 

2017년 여름에 등장한 Parcel.js는 새로운 웹 애플리케이션 번들러 입니다.
기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다.

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

 

Parcel-bundler 설치

NPM 설치

npm install -g parcel-bundler

Yarn 설치

yarn global add parcel-bundler

 

SCSS/ SASS 사용

SCSS 컴파일은 sass (dart-sass의 JS 버전) 모듈을 필요로 합니다.

 

NPM 설치

npm install -D sass

Yarn 설치

yarn add -D sass

설치가 완료되면 Javascript 파일에서 SCSS 파일을 import 하거나,

import './custom.scss'

HTML파일에 직접 포함시킬 수 있습니다.

<link rel="stylesheet" href="./style.scss">

 

Babel 

하위 버전 브라우저를 위한 자바스크립트 컴파일러

설치

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

 

지역파일 설정을 위해 루트경로에 .babelrc.js 파일을 생성합니다.

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

 

PostCSS

PostCSS는 autoprefixer, Preset Env, CSS Modules와 같은 플러그인으로 CSS를 변환하는 도구입니다. 

.postcssrc (JSON), .postcssrc.js 또는 postcss.config.js 중 하나를 사용한 구성파일을 작성하여 Parcel을 이용해 PostCSS를 구성할 수 있습니다.

 

설치

NPM 설치

npm i -D postcss autoprefixer

 

Yarn 설치

yarn add -D postcss-modules autoprefixer

그리고 구성을 위해 .postcssrc.js 를 생성합니다.

//.postcssrc.js

//import
const autoprefixer = require('autoprefixer')

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

package.json 파일에서 Autoprefixer, cssnext 및 기타 도구의 대상 브라우저를 지정하여줍니다.

"browserslist": [
    "> 1%", //지분 1% 이상
    "last 2 versions" //마지막 2버전만
  ]

autoprefixer 10 버전이 postcss 와 호환이 안되는 오류가 있기 때문에 버전을 한 단계 내려주었습니다.

npm i -D autoprefixer@9