从零开始定制一个React项目的流程

以前创建react项目时都是使用create-react-app脚手架命令，如果我们约定俗成地开发一个react项目，使用这个命令没什么太大的问题。现在我想手动创建一个react项目，需要哪些命令呢？本文总结了从零创建项目时所需要的一些命令。

• npm init -y
  此命令用来初始化项目。
• yarn add webpack webpack-cli --save-dev
  此命令用来安装webpack依赖。
  webpack是开发流程工具。
  webpack-cli是webpack的命令行工具(commend line)。
• yarn add webpack-dev-server --save-dev
  此命令指定项目在某个端口运行。安装完后在package.json文件中找到script,并将其修改为"start": "webpack-dev-server --mode development --inline --hot --open"。
• yarn add typescript --save-dev
  此命令可以将项目中的ts文件编译为js文件。安装完后需要在根目录下配置一下tsconfig.json文件，告诉项目typescript是如何编译项目的。
• yarn add @babel/core @babel/preset-env --save-dev
  @babel/core是一种转码器。它是我们js编译的核心，我们可以使用js的新特性，但它可以让js代码兼容所有的浏览器。安装完后，在项目根目录下创建.babelrc文件，并进行配置。
• yarn add bootstrap
  安装一个有点过时的前端css框架bootstrap。
• 在根目录下创建src文件，再在src下创建一个index.ts文件
• 在根目录下创建webpackconfig.js文件并配置该文件
• yarn add html-webpack-plugin mini-css-extract-plugin
  此命令是安装webpackconfig.js文件下的两个插件。
• yarn add awesome-typescript-loader
  此命令同样是安装插件。
• yarn add css-loader

此命令是用来解决bootstrap和babel版本的问题的。将webpackconfig.js文件中的module.exports下的module中的options删除即可。

• npm run start
  运行项目

总结

从零开始手动创建react项目的流程的步骤确实有点多，而且对于刚刚开始接触react的前端小白来说，确实有点晕头转向。对于这个流程，我们不用把其中的每一步都搞清楚，现阶段我们只需对这个流程有所了解，我相信随着今后深入的学习和做react项目，我们对webpack和babel内部的原理将会更加清楚。