資訊專欄INFORMATION COLUMN
摘要：本文適合的讀者現在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。
本文適合的讀者???????
現在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的h5網頁。背后他們開發這些h5的框架是怎么樣的呢？
或許你也想開發一些h5，或者簡單的react，vue應用，做些廣告，做些互動和營銷，發布到微信朋友圈傳播，那如何快速的搭建和發布這些h5呢？
或許你是前端工作不久的初學者，搭建這樣的多頁h5網站，怎么樣的架構才是正確的打開方式呢？
或許你想學習下充斥耳邊的webpack,vue,nodejs,es6,MERN框架的另類玩法，那這篇文章也適合你！
最重要的是，你煩透了移動端適配，移動端性能優化，你只想專注于功能開發，那這篇文章就是為你而準備的！
如果讓你現在從零開始搭建工程開發一個h5頁面并且發布到線上，需要多久？滴答滴答滴答！～
你可能需要做以下這些事件?？
搭建服務端工程，分好目錄結構，配置要數據庫mysql，mongodb，redis;
搭建前端工程，劃分目錄結構
前端，服務端劃分dev，test，prod環境
前端配置webpack做編譯，多個h5是多頁面的，可能你還要倒騰下webpack多頁面的配置方案
好了，可以開始開發了，mobile h5還有適配問題，ios有retina屏，android老舊機型要兼容
開發好了，要生產發布編譯了，生產的靜態文件放服務器？不，還是CDN上傳比較好
接下來要部署了，單個實例容易掛，要做cluster集群發布或者引入pm2做集群發布
前端不熟悉linux，發布了大半天
出錯了查看日志，來回折騰了大半天
折騰了好久，終于上線了，可以轉發朋友圈了～
上面折騰一番，要多久你心里也有數了。
麻煩的事情，總有對應的解決辦法，發布的multipages-generator，或許對你會有所幫助！
multipages-generator 是一個類似express-generator的，一鍵生成多頁h5網站架構模板的npm模塊；他主要是為了移動端h5，或者簡單的vue，react，angular應用的網站架構模板；該架構模板其實也是淘寶，今日頭條，美柚等公司開發app的網站架構的縮影。注意，他是一個架構，是一種移動端解決方案，不是現成可部署的網站模板。
他主要的特點是全而精，全面，開發h5所需的他基本都全了，精是開發出來的網頁高性能（未來會更好），手機適配好。具有的特別請移步github查看。
一個h5出產的截圖，利用multipags-generator開發出下面的h5，我大概估算了下只需要1個小時。
也可以用手機chrome，微信，淘寶的掃一掃打開體驗下
大家可以測試下他的性能，android，ihone 4/5/6/7/8, iphonex, 等的兼容性（用了手淘flexible，他有的這里都支持）。
multipages-generator 支持以下特點：
支持webpack編譯多頁面，可編譯指定項目，也可編譯全部項目
前端編譯支持熱更新
編譯出的網頁性能經過優化，符合最佳實踐（還不完善，后面加入淘寶性能優化的全部內容）
支持development,producton環境區分
producton環境可配置生產的css,js,images自動編譯后上傳OSS服務器
webpack編譯后的html模板支持ejs等模板引擎
使用node.js做服務，nodemon熱更新
支持pm2集群啟動
? (新) 加入手淘flexible布局方案，適配不同尺寸和DPI的屏幕，加入postcss支持
? (新) 支持生產release模式，配置下七牛云CDN，編譯后js，css，圖片等資源文件上傳cdn
安裝通過NPM全局安裝即可使用：
npm install multipages-generator -g
創建并運行?
步驟一：執行multipages-generate
multipages-generate
步驟二：出現輸入項目名提示，并輸入您的項目名稱
? Project name: <輸入項目名>
步驟三：進入目錄 -> install -> 啟動
install dependencies:
%s cd %s && npm install
run the app:
npm run start
or:
pm2 start process.json
運行與開發
啟動服務端
上面已經啟動了，如果還沒執行上面的步驟，執行以下命令
npm run start前端熱啟動項目facemerge
打開另一個終端黑窗
npm run watch:facemerge
會有頁面打開,沒有的話手動打開http://localhost:2000
注意：本應用需啟動兩個服務，一個是服務端node.js（端口默認為4000），一個是前端（browser-sync，默認2000）
這里為了讓開發時更愉悅，啟動了前端服務，具有熱更新的性能，每次更新自動編譯輸出到express工程的對應目錄中，項目部署時不需要啟動；
apps 目錄下已有facemerge，viewport兩個項目，新增一個項目xxx，目錄結構需參考facemerge
├─facemerge │ ├─assets │ │ ├─css │ │ └─imgs │ ├─js │ └─views └─voicemerge
"watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"
啟動方式跟上述 “開發模式啟動項目facemerge” 相同
發布開發好了就發布線上，這里也整理了一套30分鐘發布到線上的教程。但是僅限于個人玩一玩，并不能用于生產。但是實際上企業中使用的核心思想也是這套 + cI自動化部署；
總結本文介紹了multipages-generator（簡稱MG）迅速搭建移動端h5工程，以及迅速發布自己的應用到云服務器上。希望對前端同仁有所幫助，現在MG還在不斷的迭代演進中，如果對你有所幫助，希望動動手給我的GitHub打個start，鼓勵下我前進的動力?！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93806.html
摘要：本文適合的讀者現在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。 本文適合的讀者??????? 現在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的...
摘要：本文適合的讀者現在在手淘，京東，今日頭條，美柚等過億用戶的手機中的，都常見網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個的例子手淘，美柚。 本文適合的讀者??????? 現在在手淘，京東，今日頭條，美柚等過億用戶的手機app中的，都常見h5網頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的...
摘要：整理的一些實用的類網站及工具。鏈接云適配有時候我們做出的網站沒有用到響應式布局，也可能我們的網站的像素寬度已經規定成具體的多少像素了。同時提供多個開放，功能實用，非常強大。 整理的一些實用的IT類網站及工具。 1.聚合數據 大家在開發過程中，可能會用到各種各樣的數據，想找一些接口來提供一些數據。比如天氣預報查詢，火車時刻表查詢，彩票查詢，身份證查詢等等。有了這個接口，直接調用即可。各種...
閱讀 1310·2021-11-16 11:45
閱讀 2233·2021-11-02 14:40
閱讀 3872·2021-09-24 10:25
閱讀 3029·2019-08-30 12:45
閱讀 1255·2019-08-29 18:39
閱讀 2468·2019-08-29 12:32
閱讀 1588·2019-08-26 10:45
閱讀 1917·2019-08-23 17:01
