Parcel

 

프로젝트 설치

 

$ npm init -y
$ npm i -D parcel@next

설치가 완료되면
package.json 내부에 생성됨
"devDependencies": {
    "parcel": 설치된 버전이 명시
}

 

프로젝트 실행

 

## 세팅 ##
package.json 내부에 "scripts" 수정

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

 

프로젝트에서 터미널을 열고 npm run dev 입력 엔터로 실행

 

정적 파일 연결

 

dist 폴더로 자동으로 넣어줄 수 있는 패키지를 설치한다 (parcel-reporter-static-files-copy)

 

## 패키지 설치 ##
$ npm install -D parcel-reporter-static-files-copy

설치가 완료되면 package.json 내부 생성됨

"devDependencies": {
        "parcel-reporter-static-files-copy": 설치된 버전이 명시
}

 

## 사용 방법 ##

# 뒤에 rc(Runtime Configuration)가 붙은 파일은 구성 파일을 의미 #
1. 
.parcelrc 파일 생성 후 아래 작성
{
    "extends": ["@parcel/config-default"],
    "reporters": ["...", "parcel-reporter-static-files-copy"]
}

2. static 폴더 생성 후 아래에 정적 파일 넣기

 

Autoprefixer

 

CSS 속성의 공급 업체 접두사 (Vender Prefix)를 사용자의 브라우저에 따라 자동으로 붙여주는 플러그인 이다.

 

Vender Prefix

- 주요 웹 브라우저의 공급자(구글, MS 등)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미, 아직 CSS 권고안에 포함되지 못하거나, 포함은 되었으나 완전히 제정된 상태가 아닌 기능을 사용할 때 사용

 

## 설치 ##
## 2개의 패키지 모듈을 설치 ##
## 설치 완료 후 package.json 확인 ##
$ npm i -D postcss autoprefixer

## 사용 방법 ##
package.json 내부에 작성

# 전세계 점유율이 1% 이상인 모든 브라우저 마지막 2개 버전까지 모두 지원
"browserslist": [
    "> 1%",
    "last 2 versions"  
]

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

 

## 사용 방법 ##
프로젝트 내부에 .postcssrc 파일 생성 후 작성

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

 

Babel

 

Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구 모음

-출저-
https://babeljs.io/docs/en/

 

## 패키지 설치 ##
$ npm i -D @babel/core @babel/preset-env

Autoprefixer와 마찬가지로 package.json 내부 browerlist 작성 (있으면 작성하지 않음)

## 사용 방법 ##
1. 프로젝트 내에 .babelrc 파일을 생성 후 작성

{
    "extends": ["@parcel/config-default"],
    "reporters": ["...", "parcel-reporter-static-files-copy"]
}

 

 

---

참고

https://v2.parceljs.org/

Parcel