ts-react-parcel 项目教程

1. 项目的目录结构及介绍

ts-react-parcel/
├── src/
│   ├── index.html
│   ├── index.tsx
│   ├── App.tsx
│   └── ...
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

目录结构介绍

• src/: 项目的源代码目录，包含主要的应用程序文件。

  • index.html: 项目的入口 HTML 文件。
  • index.tsx: 项目的入口 TypeScript 文件，通常用于渲染 React 组件。
  • App.tsx: 主要的 React 组件文件。
  • ...: 其他辅助文件和组件。

• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。

• .prettierrc: Prettier 代码格式化工具的配置文件。

• LICENSE: 项目的开源许可证文件。

• README.md: 项目的说明文档。

• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。

• tsconfig.json: TypeScript 的配置文件，定义 TypeScript 编译器的选项。

• tslint.json: TSLint 的配置文件，定义代码风格和规则。

• yarn.lock: Yarn 包管理器的锁定文件，确保依赖包的版本一致性。

2. 项目的启动文件介绍

启动文件

• src/index.html: 项目的入口 HTML 文件，通常包含一个根元素（如 <div id="root"></div>），用于挂载 React 应用。
• src/index.tsx: 项目的入口 TypeScript 文件，通常包含以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

启动流程

1. HTML 文件加载: 浏览器加载 index.html 文件。
2. TypeScript 文件编译: Parcel 打包工具会自动编译 index.tsx 文件。
3. React 应用渲染: ReactDOM.render 方法将 App 组件渲染到 index.html 中的根元素（<div id="root"></div>）。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖包、脚本命令和其他元数据。

{
  "name": "ts-react-parcel",
  "version": "1.0.0",
  "scripts": {
    "develop": "yarn develop",
    "start": "yarn start",
    "build": "parcel build src/index.html -d dist --public-url '/'",
    "test": "yarn test",
    "test:watch": "yarn test:watch"
  },
  "dependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.0",
    "typescript": "^4.0.0"
  }
}

tsconfig.json

tsconfig.json 文件定义了 TypeScript 编译器的选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

tslint.json

tslint.json 文件定义了 TSLint 的代码风格和规则。

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "no-console": false,
    "interface-name": [true, "never-prefix"]
  }
}

.prettierrc

.prettierrc 文件定义了 Prettier 代码格式化工具的配置。

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

.gitignore

.gitignore 文件指定了 Git 版本控制系统忽略的文件和目录。

node_modules/
dist/
*.log

通过以上配置文件，项目可以实现 TypeScript 的编译、代码风格检查、代码格式化以及依赖管理等功能。