前言

構(gòu)建React項目的幾種方式：

• create-react-app 腳手架快速搭建 react 項目（推薦）
• yeoman 腳手架搭建 react 項目
• webpack 一步一步構(gòu)建 react 項目

腳手架是什么

腳手架是一種約定和規(guī)范?？梢詫崿F(xiàn)如下規(guī)范：

• 相同的文件組織結(jié)構(gòu)；
• 相同的開發(fā)范式；
• 相同的模塊依賴；
• 相同的工具配置；
• 相同的基礎(chǔ)代碼；

 然后腳手架將這些重復(fù)性的約定、規(guī)范全部都集成起來，減少這樣無意義的操作。

create-react-app 腳手架快速搭建 React 項目

要求：Node >= 8.10 并且 npm >= 5.6

1、安裝 create-react-app

npm install -g create-react-app

2、檢測 create-react-app 是否安裝成功

create-react-app -V

3、創(chuàng)建 React 項目

npx create-react-app my-app
cd my-app
npm start

說明：npx 是 npm 5.2+ 附帶的 package 運行工具。

默認，create react app 創(chuàng)建的項目是看不到 webpack 相關(guān)的配置的，如果熟悉 webpack 的小伙伴，知道 package.json 中的配置會很多，而react腳手架中的 package.json 中，依賴為什么這么少。

這是因為像 webpack，babel 等等都是被 creat react app 封裝到了 react-scripts 這個項目當(dāng)中，包括基本啟動命令 都是通過調(diào)用 react-scripts 這個依賴下面的命令進行啟動的。

npm run eject 會將原本 creat react app 對 webpack、babel 等相關(guān)配置的封裝彈射.出來。

如果我們要將 creat react app 配置文件進行修改，現(xiàn)有目錄下是沒有地方修改的。此時，我們就可以通過 eject 命令將原本被封裝到腳手架當(dāng)中的命令彈射.出來，然后就可以在項目的目錄下看到很多配置文件。但這個操作是不可逆的，我們無法再通過其他方式將這些暴露出來的配置還原回去。

npm run eject

Yeoman 腳手架搭建 React 項目

1、Yeoman是什么？

Yeoman 最初發(fā)布于 2012 年，是一款高效、開源的 Web 應(yīng)用腳手架（scaffolding）軟件，意在精簡軟件的開發(fā)過程。

Yeoman 是現(xiàn)代化前端項目的腳手架工具，可以根據(jù)一套模板用于生成包含指定框架結(jié)構(gòu)的工程化目錄結(jié)構(gòu)。它是整個前端自動化工廠的第一站，靈活而且很容易擴展。

不同于 vue-cli 這樣的工具。Yeoman 更像是一個腳手架的運行平臺，可以通過 Yeoman 搭配不同的 generator 去創(chuàng)建任何類型的項目。也就是說我們可以通過創(chuàng)建自己的 generator 從而去定制屬于我們自己的前端腳手架。

隨著前端工程化的理念不斷深入，越來越多的人選擇使用腳手架來從零到一搭建自己的項目。隨著業(yè)務(wù)的不斷發(fā)展，必然會出現(xiàn)需要針對業(yè)務(wù)開發(fā)的實際情況來進行調(diào)整。

總而言之，隨著業(yè)務(wù)發(fā)展，我們往往會沉淀出一套更“個性化”的業(yè)務(wù)方案。這時候我們最直接的做法就是開發(fā)出一個該方案的腳手架來，以便今后能復(fù)用這些最佳實踐與方案。

• Yeoman 提供了一種靈活創(chuàng)建、開發(fā)、編譯和調(diào)試 Web 應(yīng)用的腳手架（scaffolding）軟件。
• 雖然 Yeoman 本身是 JavaScript 編寫的，但適用于任何語言編寫的應(yīng)用。
• Yeoman 支持與 Webpack、Babel、TypeScript、React 和 Angular 等多種第三方軟件庫的無縫集成。
• Yeoman 內(nèi)建立有一個基于 Node.js 的 HTTP 開發(fā)服務(wù)器，簡化了開發(fā)環(huán)境的設(shè)置和開發(fā)過程的迭代。
• Yeoman 實現(xiàn)構(gòu)建過程由開發(fā)環(huán)境到優(yōu)化后生產(chǎn)環(huán)境間的無縫轉(zhuǎn)移。

Yeoman 其實是3個工具的總和：

• yo — 腳手架，自動生成工具；
• Grunt、gulp — 構(gòu)建工具 （最初只有grunt，后面gulp火了添加進來的）；
• Bower、npm — 包管理工具 （原來是 bower，后面添加了npm）；

上面的三個是各自獨立發(fā)展和運行的，混合后效果就不一樣，主要在于yo，相當(dāng)于一個粘合劑一樣，把grunt這些工具粘合在一起。

2、安裝 Yeoman

npm install -g yo //權(quán)限不夠，請加上 sudo，一般來說mac都需要。

3、安裝 generator 模板

npm install -g generator-react-webpack

4、創(chuàng)建 React 項目

創(chuàng)建一個文件夾

mkdir my-new-project && cd my-new-project

用生成器生成我們的項目目錄

yo react-webpack

 運行 React 項目

npm start

拓展閱讀

• YEOMAN官網(wǎng)
• 官方生成器

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論