Typescript+React项目模板(3) --- 整理项目和杂项

在上一篇提升开发体验中，我们一下子集成了一堆插件和功能进去，导致项目结构比教混乱，重点问题就在webpack的相关配置项目录build文件夹中，所以今天的工作较为轻松，重点就是进行项目结构整理，然后再进行一些杂项的添加。那么当前最先需要做的工作就是进行build文件夹下webpack相关的配置整理。

webpack相关整理

首先进入build文件夹，可以看到目前有如下文件和文件夹：

build
├── dev-server.js
├── webpack.common.js
├── webpack.config.js
├── webpack.dev.js
├── webpack.prod.js
└── scripts
    ├── build.js
    ├── clean.js
    └── dev.js

说实话这个目录结构确实是非常乱的，首先我们先对相关文件进行重命名，将webpack.common.js更名为base.js，webpack.dev.js更名为dev.js，webpack.prod.js更名为prod.js。scripts文件夹下的3个文件全部转移到上级目录即可，这3个文件是主要用来进行构建、清除和开发的，所以要放到build同级。最后把build文件夹和script文件夹删除，并把build文件夹下的4个文件重新放在上级目录中。整理完之后，可以看到build目录下只剩一个dev-server.js。另外还有一些webpack和tsconfig.json的相关配置，我们也会一并放在build目录下。

整理完后，可以看到目录结构如下：

build
├── base.js
├── dev.js
├── dev-server.js
├── prod.js
├── build.js
├── clean.js
├── dev.js
├── tsconfig.prod.json
├── tsconfig.json
├── webpack.config.js

是不是清爽了很多？

杂项添加

接下来我们来添加一些杂项，比如环境变量、代码格式化和版本控制。

环境变量

环境变量在开发和生产环境中非常有用，比如我们可以通过环境变量来控制是否开启调试模式、是否使用生产环境的API等等。在CRA中，我们可以通过创建.env文件来添加环境变量。

在项目根目录下创建一个名为.env的文件，并添加如下内容：

NODE_ENV=development

这样，我们就可以在代码中使用process.env.NODE_ENV来获取当前的环境变量了。

代码格式化

代码格式化可以帮助我们保持代码整洁美观，也便于阅读和维护。在CRA中，我们可以使用prettier来进行代码格式化。

在项目根目录下安装prettier：

npm install --save-dev prettier

然后在package.json中添加如下配置：

{
  "scripts": {
    "format": "prettier --write ."
  }
}

这样，我们就可以通过npm run format来格式化代码了。

版本控制

版本控制是管理代码变动的一种工具，可以帮助我们追踪代码的变化，并方便地回滚到之前的版本。在CRA中，我们可以使用git来进行版本控制。

在项目根目录下初始化一个git仓库：

git init

然后将代码添加到暂存区：

git add .

最后提交代码到本地仓库：

git commit -m "Initial commit"

现在，我们就可以通过git来管理代码变动了。

结语

以上就是对Typescript+React项目模板进行整理和添加杂项的详细步骤。希望本文能够帮助大家搭建一个更完善的项目模板，并提升开发体验。