Parcel로 React TypeScript 프로젝트 부트스트랩

11480 단어 reacttypescriptparcel
Parcel 번들러를 사용하면 (거의) 구성이 전혀 없는 React TypeScript 프로젝트를 부트스트랩할 수 있습니다.

먼저 폴더를 만들고 cd에 넣고 NPM을 초기화하고 소포와 React 종속성을 설치합니다.

mkdir react-number-game
cd react-number-game
npm init -y
npm i parcel-bundler --save-dev
npm i react react-dom @types/react @types/react-dom --save
mkdir src


그런 다음 좋아하는 코드 편집기를 엽니다. index.html 디렉터리에 src 파일을 만듭니다. VSCode와 같은 최신 편집기는 Emmet 완성 기능을 제공합니다. a ! 를 입력하고 탭 키를 누르면 기본 html 구조를 얻을 수 있습니다. 본문 내부에 항목index.tsx 파일에 대한 참조와 함께 루트 div 요소와 스크립트 태그를 추가합니다.

<!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>React TypeScript App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./index.tsx"></script>
</body>
</html>


최소index.tsx 파일은 다음과 같습니다. 아직 특별한 TypeScript 기능은 없습니다.

import * as React from 'react'
import { Component } from 'react'
import { render } from 'react-dom'
// import './index.css'

class App extends Component {
  render() {
    return (<h1>Hello World!</h1>)
  }
}

render(<App />, document.getElementById('root'))


마지막으로 package.json 에 시작 명령을 추가합니다.

{
  "name": "react-number-game",
  "version": "1.0.0",
  "description": "A number game in React",    
  "scripts": {
    "start": "parcel src/index.html",
  },
  "author": "Lea Rosema",
  "license": "MIT",
  "devDependencies": {
    // ...
  },
  "dependencies": {
    // ...
  }
}


그런 다음 npm start 를 통해 애플리케이션을 시작할 수 있습니다.

추가 프로젝트 구성



프로덕션 빌드



빌드 명령을 package.json에 추가하고 npm run build를 실행하십시오.

{
  "scripts": {
    "build": "parcel build src/index.html",
  }
}


전개



GitHub를 사용하는 경우 gh-pages npm 패키지를 사용하여 gh-pages에 쉽게 배포할 수 있습니다. 또한 빌드하기 전에 dist 폴더를 정리하기 위해 rimraf 패키지를 사용합니다.

npm i rimraf gh-pages -D


다음 스크립트를 package.json에 추가하십시오.

{
  "scripts": {
    "build": "parcel build --public-url . src/index.html",
    "clean": "rimraf dist/index.html dist/src.*.css dist/src.*.js dist/src.*.map",
    "predeploy": "npm run clean -s && npm run build -s",
    "deploy": "gh-pages -d dist"
  }
}

--public-url . 단계의 build 매개변수는 프로젝트가 https://username.github.io/projectname/에 배포되고 스크립트가 기본적으로 슬래시와 함께 포함되기 때문에 중요합니다(예: /src.0123abcdef.js ). 그러면 404 오류가 발생합니다.

타입스크립트



추가 TypeScript 구성이 필요할 수 있습니다. 그러나 최소 예제는 구성 없이 작동합니다. tsconfig.json 를 통해 node_modules/.bin/tsc --init 를 생성할 수 있습니다. 멋진 최소값tsconfig.json은 다음과 같습니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react"
  }
}


자동 접두사


npm i autoprefixer -D를 통해 자동 접두사를 설치하고 .postcssrc를 추가합니다.

{
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}


SCSS


index.scss 파일을 프로젝트에 추가하고 항목index.tsx으로 가져오기만 하면 됩니다. Parcel은 자동으로 node-sass 프리컴파일러를 설치합니다.

.gitignore



Parcel은 관련 출력 폴더dist에 dist 파일을 빌드하고 캐시 폴더.cache도 가지고 있습니다. .gitignore 파일에 추가하는 것이 좋습니다.

dist/index.html
dist/src.*.js
dist/src.*.css
dist/src.*.map
.cache


결과



GitHub의 내react-number-game 리포지토리에서 결과 코드를 참조하세요.
Codeforces 1107E Vasya and Binary String——dp
LetCode 문제풀이 - 전체 배열의 k번째 숫자(전체 배열 변형)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage