使用 Parcel 引导 React TypeScript 项目
使用Parcel打包器，您可以几乎无需任何配置即可启动 React TypeScript 项目。
首先，创建一个文件夹，进入该文件夹，初始化 NPM，安装 parcel 和你的 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自动补全功能。你只需输入一个 `<body>` 标签!，然后按 Tab 键，就能得到一个基本的 HTML 结构。在 `<body>` 标签内，添加一个根 `<div>` 元素和一个指向你的入口index.tsx文件的 `<script>` 标签：
<!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-pagesnpm 包轻松部署到 gh-pages。我还使用rimraf另一个包在构建之前清理 dist 文件夹：
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重要，因为你的项目部署在 `/etc/project/` https://username.github.io/projectname/，而脚本默认包含斜杠（例如 `/etc/project/` /src.0123abcdef.js）。这会导致 404 错误。
TypeScript
您可能需要额外的 TypeScript 配置。不过，最小示例无需任何配置即可运行。您可以通过生成一个tsconfig.json示例来解决这个问题node_modules/.bin/tsc --init。一个简洁的示例tsconfig.json可能如下所示：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"jsx": "react"
}
}
自动前缀生成器
通过以下方式安装 autoprefixernpm 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仓库，获取最终代码。
文章来源：https://dev.to/learosema/bootstrapping-a-react-typescript-project-with-parcel-4oia