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
파일선택 ⇒ 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 추가!
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
/* scss/main.scss */
$color--black: #000;
$color-white: #fff;
body {
background-color: $color--black;
h1 {
color: $color-white;
display: flex;
}
}
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
parcel?
불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러
⇒ 시작하기
⇒ 커맨드라인인터페이스
개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니다.
parcel index.html
애셋을 한 번 빌드합니다. 이 과정에서 코드 최소화(미니파이케이션)가 활성화되고 환경변수가 NODE_ENV=production
로 설정됩니다. 프로덕션에서 보다 자세한 내용을 확인하세요.
parcel build index.html
watch
명령어는 serve
명령어와 비슷하지만 서버를 시작하지 않는다는 점이 다릅니다.
parcel watch index.html
가능한 모든 CLI 옵션을 출력합니다.
parcel help
Parcel 의 버전을 출력합니다.
parcel --version
기본값: "dist"
같이 사용 가능한 명령어: serve
, watch
, build
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 활성
같이 사용 가능한 명령어: serve
, watch
parcel entry.js --no-hmr
기본값: 캐시 활성
같이 사용 가능한 명령어: serve
, watch
, build
parcel build entry.js --no-cache
// package.json
"scripts": {
"dev": "parcel index.html --port 5678",
"build": "parcel build index.html"
},
npm run dev
.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
저장소 업로드