[JS Bundler][Ch1][Parcel] autoprefixer

공급 업체 접두사(Vender Prefix)

신기술이 없는 구형 브라우저에서도 최신의 CSS 기술이 동작할 수 있도록 일종의 보험을 들어두는 방법

-> 자동으로 붙여주는 패키지가 존재한다.

 

1. postcss 설치

npm install -D postcss

2. autoprefixer 설치

npm install -D autoprefixer

3. package.json에 browserslist 옵션 추가

• browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도
  • 그 명시를 Autoprefixer 패키지가 활용하게 된다.

• 전세계 점유율이 1% 이상인 모든 브라우저와 해당하는 브라우저의 마지막 2개의 버전까지 지원하겠다.
  • 공급업체 접두사를 어떤 브라우저에 지원해줄 것인지를 명시

4. 루트 경로에 postcssrc.js 파일 추가

• 뒤에 rc(Runtime Configuration의 약어)가 붙은 파일은 구성파일을 의미
• postcssrc.js 이름의 파일을 생성하면 parcel-bundler가 찾아서 구성옵션으로 사용함

JavaScript는 브라우저에서 동작하는 용도와 NodeJs 환경에서 동작하는 용도가 있다.

브라우저에서 동작하는 용도는 ESM(EcmaScriptModule) 방식을, (=> import, export)

NodeJ 환경에서 동작하는 용도는 CommonJs 방식을 제공한다. (=> require(), module.exports) 

 

.postcssrc.js는 내용을 번들러를 통해서 변환하는 용도로 사용하는 것이기 때문에 NodeJs 환경에서 동작하는 개념이다.

그러므로, import가 아닌 require()를,  export가 아닌 module.exports를 사용한다.

// postcssrc.js 이름의 파일을 생성하면 parcel-bundler가 찾아서 구성옵션으로 사용함
// NodeJs 환경에선 import 대신에 require(), export 대신에 module.exports 사용

// import autoprefixer from 'autoprefixer'와 같음
const autoprefixer = require('autoprefixer');

/* export {
  plugins: [
    autoprefixer
  ]
} 와 같음 */
module.exports = {
  plugins: [
    autoprefixer
  ]
}

// 간소화시키면
/* module.exports = {
  plugins: [
    require('autoprefixer')
  ]
} */

5. npm run dev 실행 시, Error가 발생한다.

> autoprefixer 10버전 패키지와 postcss 8버전 패키지의 버전 호환이 안됨 -> 충돌이 발생

• autoprefixer를 9버전으로 다운그레이드해야함

npm i -D autoprefixer@9

개발자도구로 style 확인 시, 공급업체 접두사를 확인할 수 있음