parcel

Seulyi Yoo·2022년 7월 29일
0
post-thumbnail

프로젝트 생성

npm init -y

`npm i -D parcel-bundler`

// package.json

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
<!-- index.html -->

<title>Parcel Bundler</title>
<!-- reset.css cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
<link rel="stylesheet" href="./scss/main.scss" />
<script defer src="./js/main.js"></script>

npm run dev

http://localhost:1234


정적파일연결

https://www.icoconverter.com/

파일선택 ⇒ Sizes(32 pixels) ⇒ Bit depth(32 bits) ⇒ favicon.ico 생성

https://www.npmjs.com/package/parcel-plugin-static-files-copy

npm i -D parcel-plugin-static-files-copy

// package.json
"staticFiles": {
  "staticPath": "static"
}

static 폴더 생성 ⇒ favicon.icon 파일 이동

npm run dev

⇒ dist 폴더에 favicon.ico 추가!


autoprefixer

npm i -D postcss

npm i -D autoprefixer

// package.json
// browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도.
// 그 명시를 Autoprefixer 패키지가 활용하게 됨
"browserslist": [
  "> 1%",
  "last 2 versions"
]

.postcssrc.js 파일 생성

(rc(Runtime Configuration의 약어)가 붙은 파일은 구성 파일을 의미함)

(파일 이름앞에 . 는 숨김 파일이나 구성옵션을 의미함)

// .postcssrc.js
// ESM(ECMASCRIPT MODE)
// CommnJS

// import
require()

// export
module.exports
// .postcssrc.js
// ESM(ECMASCRIPT MODE)
// CommnJS

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

// export {
//   plugins: [
//     autoprefixer
//   ]
// }
module.exports = {
  plugins: [
    autoprefixer
  ]
}
// .postcssrc.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

npm run dev

Error Message(PostCSS plugin autoprefixer requires PostCSS 8)

npm i -D autoprefixer@9

⇒ 9버전으로 Downgrade

npm run dev

http://localhost:1234

/* scss/main.scss */
$color--black: #000;
$color-white: #fff;

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

babel

Babel?

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러입니다. 

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

.babelrc.js 파일 생성

// .babelrc.js
module.exports = {
  presets: ['@babel/preset-env']
}
// package.json
"browserslist": [
  "> 1%",
  "last 2 versions"
]

npm run dev

⇒ Error 여부 확인!

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

npm i -D @babel/plugin-transform-runtime

// .babelrc.js
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

npm run dev


CLI

parcel?

불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러

https://ko.parceljs.org/

⇒ 시작하기

⇒ 커맨드라인인터페이스

Serve

개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니다.

parcel index.html

Build

애셋을 한 번 빌드합니다. 이 과정에서 코드 최소화(미니파이케이션)가 활성화되고 환경변수가 NODE_ENV=production 로 설정됩니다. 프로덕션에서 보다 자세한 내용을 확인하세요.

parcel build index.html

Watch

watch 명령어는 serve 명령어와 비슷하지만 서버를 시작하지 않는다는 점이 다릅니다.

parcel watch index.html

Help

가능한 모든 CLI 옵션을 출력합니다.

parcel help

Version

Parcel 의 버전을 출력합니다.

parcel --version

옵션

결과물 디렉토리

기본값: "dist"

같이 사용 가능한 명령어: servewatchbuild

parcel build entry.js --out-dir build/output
# 혹은
parcel build entry.js -d build/output
root
- build
- - output
- - - entry.js

포트 번호

기본값: 1234

같이 사용 가능한 명령어: serve

parcel serve entry.js --port 1111

브라우저에서 열기

기본값: 비활성

같이 사용 가능한 명령어: serve

parcel entry.js --open

빠른 모듈 교체 비활성화

기본값: HMR 활성

같이 사용 가능한 명령어: servewatch

parcel entry.js --no-hmr

파일시스템 캐시 비활성화

기본값: 캐시 활성

같이 사용 가능한 명령어: servewatchbuild

parcel build entry.js --no-cache
// package.json
"scripts": {
  "dev": "parcel index.html --port 5678",
  "build": "parcel build index.html"
},

npm run dev

http://localhost:5678

저장소업로드

.gitignore 파일 생성(무시할 내용)

.cache
# Mac 일 경우
.DS_Store 
node_modules
dist

git init 버전 관리 초기화

git status 기본 목록 확인

git add . 버전 관리 시작

git status 변경내역 확인

git commit -m "Create project" 커밋 & 메시지

git log 확인

github 저장소 생성

git remote add origin 원격저장소주소 저장소 연결

git push origin master 저장소 업로드

profile
성장하는 개발자 유슬이 입니다!

0개의 댓글