개발

react-create-app parcel을 이용한 build하기 본문

JavaScript/React

react-create-app parcel을 이용한 build하기

Dev.hs 2021. 5. 2. 22:57

REACT-CREATE-APP Parcel을 이용하여 빌드하기

parcel 설치

npm install -g parcel
parcel ./public/index.html
  • 결과
×  E:\Study\IntelliJ\parcel\public\index.html: URI malformed
    at decodeURIComponent (<anonymous>)
    at HTMLAsset.resolveDependency (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\src\Asset.js:94:22)
    at HTMLAsset.addURLDependency (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\src\Asset.js:119:38)
    at HTMLAsset.processSingleDependency (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\src\assets\HTMLAsset.js:99:26)
    at C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\src\assets\HTMLAsset.js:187:43
    at traverse (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:26)
    at traverse (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:111:5)
    at traverse (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:17)
    at traverse (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:111:5)
    at traverse (C:\Users\Leehuseung\AppData\Roaming\npm\node_modules\parcel-bundler\node_modules\posthtml\lib\api.js:105:17)

검색해보니 create-react-app에서 사용하는 %PUBLIC_URL%가 문제가 된다고한다. 상대경로로 바꿔준다.
이유까지 알면 좋겠지만 잘모르겠음..

  • 변수변경(PUBLIC_URL 모두 동일)
<-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<link rel="apple-touch-icon" href="./logo192.png" />

  • 다음 다시 parcel을 실행해보자. BUILD SUECCESS확인. 실행은 되나 create-react-app기본페이지가 아닌 화면에 빈페이지만 나온다.

  • 레퍼런스에서 getting started를 확인하니 index.html에 script가 필요한것같다.

  • index.html을 수정해주자

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="../src/index.js">
  </body>
  • 다시 에러발생.
Uncaught ReferenceError: React is not defined
    at App (src.7ed060e2.js:29663)
    at renderWithHooks (src.7ed060e2.js:18478)
    at mountIndeterminateComponent (src.7ed 060e2.js:21240)
    at beginWork (src.7ed060e2.js:22439)
    at HTMLUnknownElement.callCallback (src.7ed060e2.js:7428)
    at Object.invokeGuardedCallbackDev (src.7ed060e2.js:7477)
    at invokeGuardedCallback (src.7ed060e2.js:7537)
    at beginWork$1 (src.7ed060e2.js:27284)
    at performUnitOfWork (src.7ed060e2.js:26120)
    at workLoopSync (src.7ed060e2.js:26057)
  • App.js 상단에 React를 선언해준다.
import React from 'react';
  • 화면이 정상적으로 나오는걸 확인했다. build를 실행한다
parcel build ./public/index.html
  • dist폴더에 build된파일을 확인할 수 있다.

Production용으로 서버에 배포시에는 build시 --no-source-maps옵션을 추가해 주는게 좋은듯하다.
안그럴 경우 개발자도구 src탭에서 컴포넌트라던가 소스정보가 모두나옴.

'JavaScript > React' 카테고리의 다른 글

리액트 Axios요청 쿠키설정 실패  (0) 2021.04.10
리액트 기본 정리  (0) 2021.03.29
'JavaScript/React' Related Articles more
Comments