개발서버 실행과 빌드

개발서버 실행

Open with Live Server를 통해 index.html 파일을 여는 방법은 원시적인 방법으로 동작하는 것으로 최신의 웹프론트엔드 개발을 할 때는 별로 유용하지 않습니다.

$ npm i parcel-bundler -D

프로젝트에 parcel-bundler를 설치했다면 package.json파일의 script부분에 아래와 같이 코드를 작성해 개발서버를 실행시키는 기능을 동작시킬 수 있습니다.

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

단, parcel-bundler는 프로젝트에만 설치가 된 것이기 때문에 터미널에서 명령을 내릴 때는 scripts에 명시한 이름(dev)을 이용해 npm run dev 실행해줍니다.

"dev": "parcel index.html"는 로컬환경에서 개발용으로 서버를 열어서 브라우저에서 프로젝트를 확인하는 것입니다.

개발서버 빌드

package.json파일의 script부분에 아래와 같이 코드를 작성해 개발서버를 빌드시키는 기능을 동작시킬 수 있습니다.

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

터미널에 npm run build를 통해 실행시킬 수 있습니다.

"build": "parcel build index.html"는 만든 프로젝트를 사용자가 보는용도의 출력시키는 것입니다.

lodash

터미널

$ npm install lodash

lodash라는 패키지를 일반 의존성으로 설치합니다.

main.js

import _ from 'lodash'

console.log('lodash')