공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/Parcel

05. vue, babel 설치 .babelrc 셋팅 하고 출력하기

serpiko 2018. 4. 30. 20:42


   05. vue, babel  설치 .babelrc 셋팅 하고 출력하기


- Vue 사용을 위해서 의존성 설치 

  : vuejs 사용을 위해서 라이브러리 설치하고,

   package.json 에 이제 사용하겠다는 의미를 선언한다고 이해하면 된다.


- Babel 사용을 위해서 플러그인과 프리셋 설치, .babelrc 셋팅

  : babel은 javascript 트랜스파일러이다. 

   브라우저마다 JS코드를 실행하는 인터프리터 버전과 지원이 서로 다른데 

   이러한 것들 (ES2016 문법 등) 을 ES2015로 안전하게 바꾸어 줄 것이다.


- .babelrc 파일은 babel의 구성파일이다.

  사실 Babel 구성하는 방법에는 packge.json에 다음과 같이 플러그인 및 사전 설정을

  할수는 있다.


  // package.json

{
  "babel": {      // nest config under "babel"
    "presets": [
      "es2015",
      "react",
      "stage-3"
    ],
    "plugins": ["transform-class-properties"]
  }
}


- 그러나 프로젝트 루트에서 별도의 파일인 .babelrc 에 독립적으로 구성하는것을 권장

  하므로, 대개 아래와 같이 구성한다.


// .babelrc
{
  "presets": [
    "es2015",
    "react",
    "stage-3"
  ],
  "plugins": ["transform-class-properties"]
}


참조 : https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/


- 마지막으로 parcel 실행



01. Vue설치


npm install --save vue
npm install --save-dev parcel-bundler


02. Babel 설치


npm install --save-dev babel-preset-env


03. .babelrc 파일 셋팅


- 루트에 .babelrc 파일을 만들고 아래와 같이 입력


{
  "presets": ["env"]
}


- 참고 : vue, babel 설치는 아래와 같이 명령어를 통해서 한번에 설치 할 수 있다.



04. package.json에 스크립트 작성


- 해당 내용은 필수는 아님


- package.json 에 시작 스크립트 작성 해준다.

  : parcel이 설치되었으므로 터미널에서 parcel index.html 명령어로 bundlering 

   할 수 있지만 이 스크립트를 작성하면 npm start 명령어로 사용 가능하다.

// package.json
"scripts": {
  "start": "parcel index.html"
}



05.  index.html, index.js 파일 만들기


- root에 index.html, index.js 파일 만들기


- index.html 은 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <scrtipt src='index.js'></scrtipt>
</body>
</html>



- index.js 는


console.log('hello parcel');




06. parcel 실행


- 아래 명령어로 실행 해보자 ( 3개 모두 동일하다 )


npm start
npm run start
parcel index.html


- 실행하면 http://localhost:1234 에 개발용 서버가 띄워진다. 브라우저에서 확인해보자


- F12 눌러서 개발자 도구의 Console 탭 보면 정상적으로 메세지 출력됨을 확인.



07. parcel CLI 명령어 참고


ㄱ. Serve : 개발전용 명령어


- serve는 개발용 서버 시작하는 명령어


- 앱이 수정되면 자동으로 다시 빌드하고, 


- HMR(Hot Module Replacement) 통해서 런타임에 새로고침없이 모듈을 자동갱신

parcel index.html


ㄴ. Build


- 코드 최소화(미니파이케이션)가 활성화 된다.


- NODE_ENV 환경변수가 production으로 설정된다

  : 어떤의미인가

       프로덕션 모드 활성화는 또한 환경 변수를 NODE_ENV=production로 설정합니다. 

       React와 같은 큰 라이브러리는 이 환경 변수를 설정함으로써 비활성화 되는 개발 전용 

       디버깅 요소가 있어 보다 작게 보다 빠르게 제품 빌드를 할 수 있습니다.

       source : https://parceljs.org/production.html


- 덧붙여서, Build를 통해서 dist폴더의 index.html 을 실행하면 동작하게 되는데

   index.html 소스안의 참조 경로가 절대 경로로 되어있는경우, 수정해야 

   제대로 동작 한다.


<script src="/main.0e0f3195.js"></script>

<script src="main.0e0f3195.js"></script>

  

위의 구문을 아래와 같이 경로 바꿔줘야 한다.


parcel build index.html


ㄷ. Watch


- Watch 는 Serve 와 비슷하지만 서버를 시작하지 않는다

  : 어떤의미인가

   APM이나 XAMPP 등 자체적으로 서버 구성하고 있으면 

   watch를 통해 번들링 하면 된다는 뜻이다


parcel watch index.html



ㄹ. 캐시와 dist 는 지워도된다.


- 간혹 root 에 화면이 제대로 반영이 되지 않거나 dist 폴더에 너무 많은 파일이

  쌓인경우 삭제해도 된다.


- root의 .cache, dist 폴더 이렇게 2개이다






[ 참고 링크 ]


- parcel 설치~ React 연동하고 Typescript 강좌 

  : 작성 내용의 상당부분 이 강좌에서 도움받았다 

    강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐

https://academy.nomadcoders.co/p/learn-parcel


- parcel 공식홈 

  : 시작하기의 내용에서 CLI들이 도움되었다

https://parceljs.org/


- vuejs 예제코드 참고

https://alligator.io/vuejs/vue-parceljs/




저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > Parcel' 카테고리의 다른 글

07. scss 연동하기  (0) 2018.04.30
06. vuejs 사용해보기  (0) 2018.04.30
04. npm init  (0) 2018.04.30
03. md 파일작성  (0) 2018.04.30
02. VSC 터미널 Nodejs's npm 이용하여서 parcel 설치  (0) 2018.04.30
댓글