multipages-generator本日宣布?！妈妈再也不必忧郁挪动端h5网站搭建了！

2019年8月24日 281次阅读 来源: yitalalww

本文合适的读者?‍?‍?‍?

如今在手淘，京东，本日头条，美柚等过亿用户的手机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！?‍

multipages-generator 是一个相似express-generator的，一键天生多页h5网站架构模板的npm模块；他重要是为了挪动端h5，或许简朴的vue，react，angular运用的网站架构模板；该架构模板实在也是淘宝，本日头条，美柚等公司开辟app的网站架构的缩影。注重，他是一个架构，是一种挪动端解决计划，不是现成可布置的网站模板。

他重要的特性是全而精，周全，开辟h5所需的他基础都全了，精是开辟出来的网页高机能（将来会更好），手机适配好。具有的特别请移步github检察。

一个h5生产的截图，应用multipags-generator开辟出下面的h5，我也许估算了下只须要1个小时。
《multipages-generator本日宣布?！妈妈再也不必忧郁挪动端h5网站搭建了！》

也能够用手机chrome，微信，淘宝的扫一扫翻开体验下
《multipages-generator本日宣布?！妈妈再也不必忧郁挪动端h5网站搭建了！》

人人能够测试下他的机能，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本日宣布?！妈妈再也不必忧郁挪动端h5网站搭建了！》

总结

本文引见了multipages-generator（简称MG）敏捷搭建挪动端h5工程，以及敏捷宣布本身的运用到云效劳器上。愿望对前端同仁有所协助，如今MG还在不停的迭代演进中，假如对你有所协助，愿望动动手给我的GitHub打个start，勉励下我行进的动力?！

    原文作者：yitalalww
    原文地址: https://segmentfault.com/a/1190000014062841
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞