[BUNDLER] PARCEL 설정

parcel bundler 설치

npm i -D parcel-bundler

 

packge.json script 수정

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

 

index.html local 구동

npm run dev

 

정적파일 연결

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

  "devDependencies": {
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "sass": "^1.58.0"
  },
  "staticFiles": {
    "staticPath": "static"
  }

 

 

autoprefixer

CSS 속성의 vendor-prefix를 접속하는 브라우저에 따라 자동으로 붙여줌

npm i -D postcss autoprefixer

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

// .postcssrc.js

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer
  ]
}

 

 

babel

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

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

// .babelrs.js

module.exports = {
  presets: ['@babel/preset-env']
}

 

 

Parcel CLI

https://ko.parceljs.org/getting_started.html

🚀 시작하기