前言

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

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

腳手架是什么

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

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

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

create-react-app 腳手架快速搭建 React 項(xiàng)目

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

1、安裝 create-react-app

npm install -g create-react-app

2、檢測(cè) create-react-app 是否安裝成功

create-react-app -V

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

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

說(shuō)明：npx 是 npm 5.2+ 附帶的 package 運(yùn)行工具。

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

這是因?yàn)橄?webpack，babel 等等都是被 creat react app 封裝到了 react-scripts 這個(gè)項(xiàng)目當(dāng)中，包括基本啟動(dòng)命令 都是通過(guò)調(diào)用 react-scripts 這個(gè)依賴下面的命令進(jìn)行啟動(dòng)的。

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

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

npm run eject

Yeoman 腳手架搭建 React 項(xiàng)目

1、Yeoman是什么？

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

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

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

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

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

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

Yeoman 其實(shí)是3個(gè)工具的總和：

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

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

2、安裝 Yeoman

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

3、安裝 generator 模板

npm install -g generator-react-webpack

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

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

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

用生成器生成我們的項(xiàng)目目錄

yo react-webpack

 運(yùn)行 React 項(xiàng)目

npm start

拓展閱讀

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

總結(jié)

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

最新評(píng)論