웹에서 직접적으로 동작하지 않는 다양한 기능들을 변환해주기 위해 번들러를 사용.
외부의 패키지의 도움을 받아 변환하는 것은 번들러에게 위임.
구성이 없는 단순한 자동 번들링으로 소/중형 프로젝트에 적합하다.
package.json파일 생성
npm init -y
개발의존성 패키지로 parcel bundler 설치
npm i -D parcel-bundler
dev스크립트를 통해 parcel 명령을 실행하고 index.html을 연결하고,
build스크립트를 통해 index.html을 실행
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},
scss폴더와 js폴더를 만들어 연결
<link rel="stylesheet" href="./scss/main.scss" />
<script defer src="./js/main.js"></script>
❌ favicon이 루트경로에 있는데도 안되는이유
parcel-bundler를 통해 dist폴더로 변환되어 삽입되는데 그 경로에 파비콘 파일이 없기 때문.
✅ 해결방법
favicon을 dist 폴더에 넣어준다. 하지만 dist폴더는 언제나 개발서버실행을 통해서 생성하고 지워지는게 반복되므로 직접 사용하는 파일을 삽입하는 것은 좋은 방법이 아니다. 그러므로 해당 파일(파비콘)을 개발서버를 열거나 제품화 시킬때 dist폴더에 자동으로 삽입될 수 있도록 패키지의 도움을 받는다.
parcel plugin static files copy 개발 의존성 모드로 설치
npm i -D parcel-plugin-static-files-copy
package.json 설정
"staticFiles": {
"staticPath": "static"
}
루트경로에 static폴더를 생성후 그안에 파비콘 넣기.
postcss의 autoprefixer패키지를 사용해 접두사 자동으로 붙여주기
npm i -D postcss autoprefixer
package.json에 브라우저 지원범위 명시(점유율이 1% 이상인 모든 브라우저의 마지막 2개 버전까지 지원하겠다는 의미)
"browserslist": [
"> 1%",
"last 2 versions"
]
.postcssrc.js 파일 설정
// 변수에 담아 설치한 autoprefixer 가져오기
const autoprefixer = require('autoprefixer')
// autoprefixer 내보내기
module.exports = {
plugins: [
autoprefixer
]
}
❌ 에러가 난다면?(에러문구:PostCSS plugin autoprefixer requires PostCSS 8.) - autoprefixer과 postcss의 버전충돌
✅ 해결방법
autoprofixer의 버전을 9~버전으로 낮춰 postcss와 호환되게 해준다.
npm i -D autoprefixer@9
Babel 적용
@babel/core @babel/preset-env 두개 패키지 설치
npm i -D @babel/core @babel/preset-env
최신 JS문법이 바벨에 의해 변환이 안될 때 추가 설치
npm i -D @bebal/plugin-transform-runtime
.babel.js 파일 설정
module.exports = {
// 이를 설정함으로써 작성된 JS문법들이 ES5 문법으로 변경가능
presets: ['@babel/preset-env'],
// 추가로 설치한 플러그인 설정
plugins: [
['@babel/plugin-transform-runtime']
]
}