React和CLI

React有自己的CLI，但目前它們僅支持創(chuàng)建應(yīng)用程序（create React app）。創(chuàng)建react應(yīng)用程序，用于通過(guò)命令行生成react應(yīng)用程序的樣板文件版本。

npx create-react-app my-app

create react app負(fù)責(zé)設(shè)置應(yīng)用程序的主結(jié)構(gòu)以及幾個(gè)開(kāi)發(fā)人員設(shè)置。你看到的大部分內(nèi)容對(duì)你的web應(yīng)用的訪問(wèn)者來(lái)說(shuō)都是看不見(jiàn)的。React使用一個(gè)名為webpack的工具，該工具將此處的目錄和文件轉(zhuǎn)換為靜態(tài)資產(chǎn)。您網(wǎng)站的訪問(wèn)者將獲得這些靜態(tài)資產(chǎn)。

您或您的團(tuán)隊(duì)創(chuàng)建的每個(gè)React應(yīng)用程序都具有相同的結(jié)構(gòu)，這對(duì)于跨應(yīng)用程序的一致性非常有利。

然而，用戶界面的開(kāi)發(fā)不僅僅是應(yīng)用程序，還包括組件、模塊和頁(yè)面的開(kāi)發(fā)。開(kāi)發(fā)人員應(yīng)該通過(guò)查看設(shè)計(jì)師提供的線框來(lái)知道需要開(kāi)發(fā)什么。

如果沒(méi)有定義的結(jié)構(gòu)，您的應(yīng)用程序?qū)⒕哂谢旌辖Y(jié)構(gòu)。

開(kāi)發(fā)1

• 儀表板頁(yè)

• 標(biāo)題組件

• 卡組件

• 圖形組件

開(kāi)發(fā)2

• 儀表板頁(yè)面

• 標(biāo)題模塊（用于搜索組件、圖標(biāo)組件和下拉組件的容器）

• 統(tǒng)計(jì)模塊（用于卡組件的1個(gè)變體的容器）

• 多變體卡復(fù)合組件

開(kāi)發(fā)3

• 管理頁(yè)面

• 如果3個(gè)開(kāi)發(fā)人員在同一個(gè)項(xiàng)目中工作，你可能會(huì)得到3個(gè)不同的結(jié)構(gòu)在項(xiàng)目中使用

• 用于生成樣板文件（組件、模塊和頁(yè)面）的CLI將增加提供一致結(jié)構(gòu)的好處

• 讓我們從設(shè)置CLI工具（plopJS）開(kāi)始

1.設(shè)置CLI

我們通過(guò)命令行使用plopJS，即微生成器框架。plopJS模板使用強(qiáng)大的模板引擎Handlebars。手柄提供了有效構(gòu)建語(yǔ)義模板所必需的功能。

步驟

將plopJS添加到package.json

"devDependencies": {
  "plop": "^2.3.0"
}

并運(yùn)行：

npm install

2.定義結(jié)構(gòu)

頁(yè)數(shù)

模塊容器。頁(yè)面管理內(nèi)部模塊之間的通信。

<Page>
 <ModuleA />
 <ModuleB />
</Page>

模塊

組件容器。模塊管理內(nèi)部組件之間的通信。

<Module>
 <ComponentA />
 <ComponentB />
</Module>

組件

模塊的功能。

<ComponentA>
 <section>
  <article>
   Article
  </article>
 </section>
</ComponentA>

3.創(chuàng)建一個(gè)plopfile配置

創(chuàng)建“ plopfile.js”，在與package.json相同的路徑中創(chuàng)建plopfile.js。

module.exports = function (plop) {

    plop.setGenerator('component', {...})

    plop.setGenerator('module', {...})

    plop.setGenerator('page', {...})

};

在本教程/文章中，我們將介紹如何為組件創(chuàng)建生成器。完整的發(fā)電機(jī)可以在這里找到。

模板

腳本文件

測(cè)試文件

樣式文件

索引文件

將所有模板保存在文件夾plop-templates中。

4.創(chuàng)建一個(gè)生成器

如所知，我們將顯示發(fā)電機(jī)的組成部分。

一切似乎都準(zhǔn)備好了，讓我們測(cè)試一下發(fā)電機(jī)。

我添加了新的npm任務(wù)“cmd”，它將運(yùn)行“npx plop”。如果以上所有設(shè)置正確，您將看到要選擇的生成器列表。

開(kāi)始回答問(wèn)題，完成后您會(huì)看到組件已生成。

讓我們來(lái)看看已經(jīng)生成了什么：

• Card.js
  

• Card.style.js
  

• Card.test.js
  

• index.js
  

摘要

CLI使創(chuàng)建一個(gè)應(yīng)用程序、頁(yè)面、模塊和組件變得容易，它遵循您和您的團(tuán)隊(duì)定義的最佳實(shí)踐和結(jié)構(gòu)。開(kāi)發(fā)人員還有其他事情要擔(dān)心，通過(guò)自動(dòng)化組件生成，不僅節(jié)省了他們的時(shí)間，而且提高了效率。