고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

Bundler/Parcel

• Parcel - Babel

  Bundler/Parcel 2021. 5. 30. 00:02

  Babel ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러 npm i -D @babel/core @babel/preset-env .babelrc.js 파일 생성 .babelrc.js 설정 후 package.json의 browserslist 옵션에 설정된 내용에 영향을 받음 // .babelrc.js module.exports = { presets: ['@babel/preset-env'], }; // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description"..

  Read More
• Parcel - autoprefixer

  Bundler/Parcel 2021. 5. 29. 23:45

  npm i -D postcss autoprefixer pacakge.json에 browserslist 옵션 설정 browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도 이 옵션을 autoprefixer 패키지가 활용하게 됨 // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDependencies": { "autoprefixer": "^10.2.6", "parcel-bundler..

  Read More
• Parcel - 정적 파일 연결(이미지, favicon)

  Bundler/Parcel 2021. 5. 29. 23:23

  favicon 이미지 추출 https://icoconvert.com/ Parcel build 시 dist 폴더 생성 정적 파일이 자동으로 dist 폴더에 삽입되어야 함 npm install -D parcel-plugin-static-files-copy https://www.npmjs.com/package/parcel-plugin-static-files-copy // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDep..

  Read More
• Parcel - 프로젝트 설정

  Bundler/Parcel 2021. 5. 29. 23:15

  npm init -y npm i -D parcel-bundler package.json에 scripts 설정 "dev": "parcel index.html" // 개발용 서버 실행 "build": "parcel build index.html" // 빌드 // package.json { "name": "parcel-bundler-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "devDependencies": { "parcel-bundler": "^1.12.5" } } Parcel CLI http..

  Read More