parcel bundler 필수 플러그인

parcel bundler

parcel-bundler

 

 

 

scss 상위버전, 이건 html에 link 해주면 자동으로 깔림. (번들러가 깔렸을 시. 번들러 역할이 그거니까.)

sass

 

 

자동으로 여러 브라우저 버전에 맞게 css에다 지원해주는 (--webkit-o-(오페라)등 추가로 해 줌)

autoprefixer

postcss

둘다 설치 하고, 설정 파일 .postcssrc.js 만들어서

const autoprefixer = require('autoprefixer');

module.exports = {

  plugins : [

    autoprefixer

  ]

}

해줘야 함.

 

이 때, 어디까지 지원해 줄 지 package.json에 명시해 줘야 함. 

  "browserslist": [

    "> 1%",

    "last 2 version"

  ]

상위 1% 브라우저들

최신 2개 버전

 

 

 

 

js의 최신버전, 혹은 파생언어를 ES5 버전으로 트랜스파일 해 줄

@babel/core

@babel/preset-env

https://qwefdg3.tistory.com/377

이거 참조

설치 후

.babelrc.js 만들어서

module.exports = {

  presets : ["@babel/preset-env"],

  plugins : ["@babel/plugin-transform-runtime"]

}

 

 

 

 

 

정적 파일, 내가 직접 넣어주는

parcel-plugin-static-files-copy

이건 package.json에 플러그인의 값을 지정해 줘야 함.

 

  "staticFiles": {

    "staticPath": "static"

  },

최상위 static 폴더에

 

 

 

 

 

 

 

전체

{

  "name": "parcel_project",

  "version": "1.0.0",

  "description": "this is package of parcel-bundler",

  "main": "index.js",

  "scripts": {

    "serve": "parcel index.html --open",

    "build": "parcel build index.html"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.22.11",

    "@babel/plugin-transform-runtime": "^7.22.10",

    "@babel/preset-env": "^7.22.14",

    "autoprefixer": "^9.8.8",

    "parcel-bundler": "^1.12.5",

    "parcel-plugin-static-files-copy": "^2.6.0",

    "postcss": "^8.4.29",

    "sass": "^1.66.1"

  },

  "staticFiles": {

    "staticPath": "static"

  },

  "browserslist": [

    "> 1%",

    "last 2 version"

  ]

}

 

 

만약 환경 가져올 때도 잊지말고 환경파일 (.으로 시작하는 rc로 끝나는(확장자명말고)파일들)을 가져오자.