国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何構(gòu)建大型的前端項(xiàng)目

plokmju88 / 2121人閱讀

摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目?jī)?nèi)的組件化和項(xiàng)目外的組件化。

如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架

一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能：

自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能

本地開發(fā)與調(diào)試，并有熱替換與熱加載等功能

本地接口數(shù)據(jù)模擬

css 模塊化

檢查并自動(dòng)矯正不符合規(guī)范的代碼，并優(yōu)化代碼格式

社區(qū)已有很多模板（boilerplate）或工具幫助我們搭建一個(gè)現(xiàn)成的腳手架，比如：

create-react-app

vue-cli

yeoman

html5-boilerplate

react-boilerplate

hackathon-starter

當(dāng)然，如果這些模板或工具都不能滿足你的需求，你也可以搭建自己的腳手架，可以參考：

搭建自己的前端腳手架

怎樣提升代碼質(zhì)量

CSS 模塊化

css 的弱化與 js 的強(qiáng)化

本地化接口模擬、前后端并行開發(fā)

2. 定義好項(xiàng)目的目錄結(jié)構(gòu)

對(duì)于大型目錄而言，一個(gè)好的目錄結(jié)構(gòu)是非常必要的。一個(gè)好的目錄結(jié)構(gòu)應(yīng)當(dāng)具有以下的一些特點(diǎn)：

解耦：代碼盡量去耦合，這樣代碼邏輯清晰，也容易擴(kuò)展

分塊：按照功能對(duì)代碼進(jìn)行分塊、分組，并能快捷的添加分塊、分組

編輯器友好：需要更新功能時(shí)，可以很快的定位到相關(guān)文件，并且這些文件應(yīng)該是很靠近的，而不至于到處找文件

可以參考 目錄結(jié)構(gòu)優(yōu)化

3. 做好項(xiàng)目的組件化

這里的組件化，并非框架層面的組件化，而是工程層面的組件化。

當(dāng)一個(gè)項(xiàng)目中的不同的區(qū)塊需要共用同一段代碼，或者不同項(xiàng)目之間需要共享同一個(gè)組件的時(shí)候，就需要做組件化了。

組件化一般分為項(xiàng)目?jī)?nèi)的組件化和項(xiàng)目外的組件化。

項(xiàng)目?jī)?nèi)的組件化是，同一個(gè)項(xiàng)目?jī)?nèi)不同區(qū)塊共用的代碼可以提取出來(lái)為一個(gè)多帶帶的組件。

項(xiàng)目外的組件化是，跨項(xiàng)目間共享的代碼可以提取出來(lái)為一個(gè)多帶帶的項(xiàng)目，然后如正常的 npm 包一樣使用。

可以參考：

組件化

私有 npm 倉(cāng)庫(kù)

4. 封裝團(tuán)隊(duì)的構(gòu)建工具

對(duì)于多項(xiàng)目而言，不管使用 webpack 還是 rollup 來(lái)打包項(xiàng)目，都會(huì)面臨一些問(wèn)題：

不同項(xiàng)目有不同配置文件，更新配置需要到處改，而且很難保持一致

如果有項(xiàng)目的升級(jí)，不同區(qū)塊可能會(huì)有不同的配置

這個(gè)時(shí)候，把配置文件封裝成一個(gè)項(xiàng)目，然后使用版本化的方式管理，如正常的 npm 包一樣使用，就會(huì)很方便了。

比如，我的項(xiàng)目都是使用 lila 來(lái)構(gòu)建的。

5. 選好基礎(chǔ) js 框架、ui 框架、頁(yè)面模板

開始開發(fā)前，需要先選好基礎(chǔ) js 框架，比如 react、vue、angular、jquery 等，因?yàn)橐坏┻x定，基本上后面都不能更換了，因?yàn)楦鼡Q的成本太大了。

選好基礎(chǔ) js 框架后，可以選一個(gè)比較好的 ui 框架，這樣可以少寫很多代碼，可以參考 前端最受歡迎的 UI 框架。

如果頁(yè)面的定制化程度不高，可以選擇一個(gè)比較好的頁(yè)面模板，比如：

AdminLTE

vue-element-admin

gentelella

ngx-admin

ant-design-pro

6. 測(cè)試

一般前端測(cè)試分以下幾種：

單元測(cè)試：模塊單元、函數(shù)單元、組件單元等的單元塊的測(cè)試

集成測(cè)試：接口依賴（ajax）、I/O 依賴、環(huán)境依賴（localStorage、IndexedDB）等的上下文的集成測(cè)試

樣式測(cè)試：對(duì)樣式的測(cè)試

E2E 測(cè)試：端到端測(cè)試，也就是在實(shí)際生產(chǎn)環(huán)境測(cè)試整個(gè)應(yīng)用

一般會(huì)用到下面的一些工具：

jest

enzyme

cypress

selenium

puppeteer

另外，可以參考 聊聊前端開發(fā)的測(cè)試。

7. 持續(xù)集成構(gòu)建與測(cè)試

一般大型工程的的構(gòu)建與測(cè)試都會(huì)花很長(zhǎng)的時(shí)間，在本地做這些事情的話就不太實(shí)際，這就需要做持續(xù)集成構(gòu)建與測(cè)試了。

持續(xù)集成工具用的比較多的：

jenkins

gitlab ci

jenkins 是通用型的工具，可以與 github、bitbucket、gitlab 等代碼托管服務(wù)配合使用，優(yōu)點(diǎn)是功能強(qiáng)大、插件多、社區(qū)活躍，但缺點(diǎn)是配置復(fù)雜、使用難度較高。

gitlab ci 是 gitlab 內(nèi)部自帶的持續(xù)集成功能，優(yōu)點(diǎn)是使用簡(jiǎn)單、配置簡(jiǎn)單，但缺點(diǎn)是不及 jenkins 功能強(qiáng)大、綁定 gitlab 才能使用。

另外，如果是開源項(xiàng)目，travis ci 是個(gè)不錯(cuò)的選擇。

后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98274.html

相關(guān)文章

  • 如何構(gòu)建大型的前端項(xiàng)目

    摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目?jī)?nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...

    lykops 評(píng)論0 收藏0

  • 如何工程化開發(fā)大型angular2項(xiàng)目（上篇）

    摘要：首先我們得有一個(gè)主心庫(kù)，這個(gè)庫(kù)十分重要，里面沒(méi)有業(yè)務(wù)邏輯的代碼，主要是平時(shí)開發(fā)時(shí)所需要的所有腳本，以及的一些基本依賴。創(chuàng)建衍生庫(kù)因?yàn)槲覀兯许?xiàng)目圍繞主心庫(kù)而衍生出來(lái)的，所以衍生庫(kù)和主心庫(kù)的關(guān)心和關(guān)系一致。 如何工程化開發(fā)大型angular2項(xiàng)目（上篇） 前請(qǐng)?zhí)嵋?目前前端項(xiàng)目越來(lái)越復(fù)雜，管理一個(gè)前端項(xiàng)目需要考慮的方面越來(lái)越多，例如工具選擇、項(xiàng)目構(gòu)建、代碼自動(dòng)review工具、代碼打包上...

    codeKK 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 Angular 篇

    摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...

    LeviDing 評(píng)論0 收藏0

  • 我是如何使用React+Redux構(gòu)建大型應(yīng)用的

    摘要：所以前端工程師不僅僅是寫好頁(yè)面和做好兼容性。對(duì)前端工程師的技術(shù)能力也會(huì)帶來(lái)考驗(yàn)。這里想要說(shuō)的是，如果使用了，使用了服務(wù)端渲染，對(duì)于前端工程師的個(gè)人素質(zhì)要求會(huì)比較高，因?yàn)樾枰幚砗芏喾?wù)端的問(wèn)題。 背景 我們團(tuán)隊(duì)有個(gè)項(xiàng)目由于開發(fā)時(shí)間較長(zhǎng)，且是前后端雜糅的開發(fā)方式，維護(hù)成本很高，在線上暴露的問(wèn)題很多。而且因?yàn)閷?duì)接了公司一百多條產(chǎn)品線，每天都會(huì)接到大量的客訴和產(chǎn)品線反饋的問(wèn)題。2017年11...

    canopus4u 評(píng)論0 收藏0

  • 前端開發(fā)之走進(jìn)Vue.js

    摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡(jiǎn)稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通...

    zxhaaa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<