項目開始前梆暮，我們先聊一聊關(guān)于項目的一些說明科贬。該項目起始于2017年初衷敌，當(dāng)時公司主要技術(shù)棧為gulp+angular大莫，鑒于react的火熱的生態(tài)蛉腌，在公司決定研發(fā)bss管理系統(tǒng)時選用react開發(fā)，目的也是為react native打下基礎(chǔ)只厘，以解決后期公司大前端技術(shù)棧的逐步成熟烙丛。（當(dāng)時沒有選擇vue開發(fā)的主要原因是weex生態(tài)還不夠特別成熟），既然決定換新羔味，項目的構(gòu)建也跟著一起換河咽，從gulp轉(zhuǎn)向火熱的webpack，持續(xù)大半年的更新迭代赋元，我們將構(gòu)建模塊逐步從項目中抽離出來忘蟹，把構(gòu)建模塊作為npm包單獨管理，完成和項目代碼解耦搁凸，于是就有了后面我們要說的wci-build構(gòu)建模塊包和wci-cli項目腳手架媚值。
我們要做什么
技術(shù)棧
項目采用前后端分離的形式，后端選用Maven+SpringClould全家桶開發(fā)护糖，前端選用webpack+react全家桶開發(fā)杂腰，前后端全部采用包管理工具完全解決項目依賴管理的難題，版本管理采用git椅文，前后端通過json交互喂很，swgger管理接口文檔，接口全部遵循restful規(guī)范皆刺。由于本文面向社區(qū)開放少辣，故本文中不涉及公司業(yè)務(wù)層的代碼，本文全部代碼均為最新編寫羡蛾，我們以一個旅游管理系統(tǒng)的三個模塊為大家演示項目（登陸登出漓帅、用戶模塊、景點模塊）痴怨。為了快速開展忙干，本文涉及的后端代碼直接采用Java的SSM框架搭建，源碼也將為大家奉上浪藻。朋友們也可以使用mock模擬接口數(shù)據(jù)捐迫。后期我們在演示nodejs+espress時將接口代碼全部轉(zhuǎn)為node形式。
準(zhǔn)備
因本文不是講解基礎(chǔ)爱葵，故大家在敲代碼前施戴，還需要具備一定的前端基礎(chǔ)，部分如下
- html萌丈、css赞哗、javascript基礎(chǔ)知識
- es6基礎(chǔ)知識
- react基礎(chǔ)知識
- 了解什么是webpack、babel辆雾、redux肪笋、react-router、nodejs度迂、npm
- 熟悉螞蟻金服ant design
- 熟悉less基本使用
解決什么問題
本項目集成了最新的react16藤乙、react-router4、redux英岭，同時可以選擇性集成antd|antd mobile湾盒，在解決繁瑣的架構(gòu)配置工作外，還解決了以下問題
通用問題
- 支持開發(fā)效率更高的ES6編寫代碼诅妹。
- 拆分開發(fā)罚勾、測試、生產(chǎn)環(huán)境吭狡，完成從開發(fā)到上線的所有工作尖殃。
- 開發(fā)環(huán)境包含熱替換，本地IP划煮、端口可配置送丰，接口可配置，微服務(wù)模塊可配置
- 測試環(huán)境包含代碼壓縮弛秋、合并器躏、css抽離俐载、公共組件抽離、代碼添加hash登失、測試版本后綴
- 生產(chǎn)環(huán)境包含代碼壓縮遏佣、合并、css抽離揽浙、公共組件抽離状婶、代碼添加hash、生產(chǎn)版本后綴（和測試代碼完全一樣馅巷，只缺少測試版本號）
- 支持自定義添加webpack loader
其他問題
- 目前大型項目后端多采用微服務(wù)架構(gòu)膛虫，API接口在開發(fā)、測試钓猬、生產(chǎn)環(huán)境下來回切換稍刀，需要頻繁修改代碼。解決方案：通過配置文件的方式統(tǒng)一配置項目模塊接口
- 項目模塊在分拆開發(fā)的過程中css命名沖突逗噩，導(dǎo)致代碼維護性較差掉丽。解決方案：構(gòu)建工具預(yù)加載css時自動化添加hash，使css代碼模塊化
- 不同開發(fā)人員异雁，不同的代碼習(xí)慣造成項目代碼難以維護捶障。解決方案：在代碼編寫、構(gòu)建纲刀、版本管理三個方向加入代碼規(guī)范校驗（airbnb規(guī)范）
- 在同時開發(fā)多個系統(tǒng)的時候项炼，構(gòu)建業(yè)務(wù)模塊在不同的項目都存在，當(dāng)需要修改配置或者優(yōu)化構(gòu)建方案的時候示绊，需要修改多個項目的配置锭部。解決方案：抽離構(gòu)建模塊，采用npm形式依賴面褐。
還有什么問題要解決
雖然經(jīng)過大半年迭代拌禾，但我們還需要在實際項目開發(fā)中支持更多的個性化需求
- cdn自動化
- 更加完善的持續(xù)集成
- 單元測試，包括代碼展哭，交互測試
- mock數(shù)據(jù)湃窍，實現(xiàn)前后端真正0接觸
- ...
希望
大家在開發(fā)過程中遇到任何問題，希望可以給我們留言匪傍，我們會不斷優(yōu)化項目您市。未來，我們還會加入mobx役衡、rxjs茵休、immutablejs、GraphQL等，也希望在和大家的探討中榕莺，持續(xù)進步俐芯。
項目準(zhǔn)備
本項目基礎(chǔ)環(huán)境必須依賴nodejs和npm,未安裝的朋友可以去官網(wǎng)自行安裝，安裝教程這里不詳細(xì)說明钉鸯，安裝完成后使用如下命令泼各，查看是否安裝成功。
node -v
npm -v
初始化項目
本項目我們使用wci-cli腳手架初始化項目
- 全局安裝wci-cli
npm install -g wci-cli
- 創(chuàng)建項目
wci-cli 腳手架可以創(chuàng)建三種項目亏拉，分別是1.純凈的react項目 2.包含antd的react項目 3.包含antd-mobile的react項目，命令如下
wci new myapp
執(zhí)行命令后逆巍，命令行會提示是否需要安裝antd以及選擇antd類型及塘，即可完成項目初始化，如下
項目目錄
myapp
├── app // 項目業(yè)務(wù)代碼
│ ├── assets // 靜態(tài)文件目錄（圖片锐极、字體等）
│ ├── script // js代碼目錄
│ │ ├── actions // redux action目錄
│ │ ├── componets // react 無狀態(tài)組件目錄
│ │ ├── containers // react 業(yè)務(wù)代碼
│ │ ├── reducers // redux reducer目錄
│ │ ├── util // 工具包目錄
│ │ │ ├── theme.js // antd自定義樣式文件
│ │ ├── Home.js // 首頁
│ │ ├── home.less // 首頁樣式
│ ├── styles // 全局樣式目錄
│ ├── index.js // 項目入口文件
│ ├── index.tpl.html // 項目html模版
├── node_modules // 依賴包目錄
├── .babelrc // babel配置文件
├── .eslintrc // eslint代碼校驗配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci項目配置文件（主要配置一些開發(fā)笙僚、測試、生產(chǎn)環(huán)境的信息）
└── webpack.js // webpack自定義配置文件
執(zhí)行如下命令灵再，運行開發(fā)環(huán)境
cd myapp
npm run start
如上圖肋层，我們的項目已經(jīng)跑起來了...
- 測試、發(fā)布
因我們需要保證測試代碼和生產(chǎn)代碼必須保持一致翎迁，所有在實際項目中栋猖，我們可以運行如下命令構(gòu)建代碼
npm run test // 測試環(huán)境打包
npm run dist // 生產(chǎn)環(huán)境打包
測試代碼
生產(chǎn)代碼
到這里，我們已經(jīng)完成項目前期開發(fā)的所有準(zhǔn)備工作汪榔，接下來蒲拉，我們一起開始擼代碼吧
項目結(jié)束后，我會為大家奉上兩篇彩蛋痴腌，分別是 1. 一步步搭建webpack前端構(gòu)建工具并抽成npm單獨模塊 2. 一步步構(gòu)建自己的npm開發(fā)包并且以一個真實例子演示（開發(fā)一個命令行生成文件夾結(jié)構(gòu)的小工具）
未完待續(xù) 更新于2018-02-25
