從零開始定製一個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內部的原理將會更加清楚。