Parcel Bundler를 이용하여 typescript + reaact 프로젝트를 설정해 볼 예정이다.
먼저 필요 패키지들을 설치해준다.
yarn add react react-dom
yarn add -D parcel-bundler
yarn add -D @types/react @types/react-dom
많이 들 하듯이 package.json 파일내에 script를 추가해준다.
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
}
src 폴더를 만들어 주고 index.html 파일을 만들어 준다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<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>Parcel Example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>
index.tsx 파일도 생성해준다.
import React from "react";
import { render } from "react-dom";
render(<div>Hello ReactJS</div>, document.getElementById(
"root"
) as HTMLElement);
tsconfig.json
{
"compilerOptions": {
"esModuleInterop": true,
"jsx": "react",
"module": "commonjs",
"strict": true,
"target": "es5"
}
}
위 파일의 설정들을 필요에 맞게 수정해주면 된다.
자 이제 모든 설정은 끝이났다.
~/Documents/parcel-example yarn dev
yarn run v1.13.0
$ parcel ./src/index.html
Server running at http://localhost:1234
✨ Built in 1.25s.
굿 ! 1234번 포트로 쉽게 reactjs + typescript 프로젝트를 만들었다.
이제 기존에 개발하듯이 개발을 하면 된다.
Webpack처럼 복잡하지 않고 쉽게 프로젝트 설정이 가능하여 간단하게 설정하는 프로젝트에 많이 사용될 것 같다. 간단하다는게 일반적으로 대규모의 프로젝트가 아니면 어디서든 부담없이 사용이 가능할것처럼 보인다.
'Develop > React' 카테고리의 다른 글
| Create Expo + ReactNative + Typescript Manually (0) | 2019.03.13 |
|---|---|
| Create ReactNative + Typescript App project (0) | 2019.03.07 |
| React Hooks (0) | 2019.03.06 |
| Using environment variables in the .env file in reactjs (0) | 2019.01.31 |
| [ReactNative] Expo ios simulator said "This version of ..." (0) | 2018.10.23 |