从零开始定制一个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内部的原理将会更加清楚。