前言
generator-tc-react 是一个自动创建 React 项目的脚手架，它使用 Yeoman 工具实现，在创建项目时可以选择使用 TypeScript 或 JavaScript，使用 Sass 或 CSS，同时还支持自定义目录结构以及 webpack 配置。
本文将介绍如何使用 generator-tc-react 进行项目的创建，包括安装、使用、基础配置和高级配置等。
安装
使用 npm 进行全局安装：
npm install -g yo generator-tc-react
安装完成后，可以使用以下命令验证安装是否成功：
yo tc-react --help
使用
在终端中进入项目要创建的目录，执行以下命令：
yo tc-react
接着按照提示进行选择配置，创建一个新项目。
基础配置
TypeScript 或 JavaScript
创建项目时，可以选择使用 TypeScript 或 JavaScript，如果选择 TypeScript，则需要在安装依赖时添加：
npm install --save-dev @types/react @types/react-dom @types/node
Sass 或 CSS
同样，在创建项目时可以选择使用 Sass 或 CSS。如果选择 Sass，则需要在安装依赖时添加：
npm install --save-dev node-sass sass-loader
在项目中使用 Sass，请在 css 文件夹下创建 styles.scss 文件，并在 index.tsx 或 index.js 中导入 styles.scss。
自定义目录结构
默认的目录结构如下：
- public - index.html - src - components - css - index.tsx or index.js
如果想要修改这个目录结构，可以在创建项目时根据提示输入自定义目录结构。
高级配置
webpack 配置
generator-tc-react 默认使用 webpack 进行项目打包，如果需要对 webpack 进行进一步的配置，可以使用以下命令生成默认配置文件：
npm run eject
然后在根目录下会生成一个 config 文件夹，里面包含了 webpack 的配置文件，可以在这里进行修改。
添加 React Router
在项目中添加 React Router，需要使用以下命令安装依赖：
npm install --save react-router-dom
接着在 index.tsx 或 index.js 中引入 React Router，并配置路由。
添加 Redux
在项目中添加 Redux，需要使用以下命令安装依赖：
npm install --save react-redux redux
接着在 src 文件夹下创建 store 文件夹，并在其中创建 store.ts（或 index.ts）文件。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------- ---- ------- ---- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - -------------------- - ------ - ---
------ ------- ------接着在 index.tsx 或 index.js 中引入 store，并使用 Provider 将 App 组件包裹起来。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------------
------ --- ---- -------------------
----------------
--------- --------------
---- --
------------
--------------------------------
--添加 Redux Saga
在项目中添加 Redux Saga，需要使用以下命令安装依赖：
npm install --save redux-saga
接着在 src 文件夹下创建 sagas 文件夹，并在其中创建 rootSaga.ts（或 index.ts）文件。
import { all, fork } from 'redux-saga/effects';
export default function* rootSaga() {
yield all([
// TODO: add sagas
]);
}接着在 store.ts 中引入 rootSaga，并在 createStore 的第二个参数中加入 applyMiddleware 方法。
-- -------------------- ---- ------- ------ -------------------- ---- ------------- ------ - ------------ --------------- - ---- -------- ------ -------- ---- -------------------- ------ ------- ---- -------------- ----- -------------- - ----------------------- ----- ----- - -------------------- - ------ - -- --------------------------------- ----------------------------- ------ ------- ------
结语
通过本文，我们了解了如何使用 generator-tc-react 来快速创建 React 项目，并学习了一些基础和高级配置，希望读者可以从中受益。如果您有更多的问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d32