{"id":25455284,"url":"https://github.com/linweiwei123/multipages-generator","last_synced_at":"2025-04-07T10:23:01.348Z","repository":{"id":30495513,"uuid":"124876302","full_name":"linweiwei123/multipages-generator","owner":"linweiwei123","description":"🥇 generator for multiple pages webpack application","archived":false,"fork":false,"pushed_at":"2023-01-07T04:14:54.000Z","size":2815,"stargazers_count":355,"open_issues_count":18,"forks_count":39,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T08:09:02.951Z","etag":null,"topics":["express","flexible","frontend","node-module","nodejs","optimization","webpack"],"latest_commit_sha":null,"homepage":"https://linweiwei123.github.io/multipages-generator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linweiwei123.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-12T11:05:31.000Z","updated_at":"2025-01-24T02:03:27.000Z","dependencies_parsed_at":"2023-01-14T17:04:43.737Z","dependency_job_id":null,"html_url":"https://github.com/linweiwei123/multipages-generator","commit_stats":null,"previous_names":["linweiwei123/multipage-generator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fmultipages-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fmultipages-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fmultipages-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linweiwei123%2Fmultipages-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linweiwei123","download_url":"https://codeload.github.com/linweiwei123/multipages-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247632371,"owners_count":20970157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","flexible","frontend","node-module","nodejs","optimization","webpack"],"created_at":"2025-02-18T00:57:09.307Z","updated_at":"2025-04-07T10:23:01.319Z","avatar_url":"https://github.com/linweiwei123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[English](./README.md) | 中文\n\nmultipages-generator [![NPM version](https://badge.fury.io/js/multipages-generator.png)](http://badge.fury.io/js/multipages-generator)\n======\n\n[![NPM](https://nodei.co/npm/multipages-generator.png?downloads=true\u0026stars=true)](https://nodei.co/npm/multipages-generator)\n\nmultipages-generator （MG） 🤡是一个像express-generator一样快速生成网站开发脚手架的npm模块，完整的移动端h5解决方案，快速、高效、良好兼容性、高性能。\n\n## 适合场景\n如美柚，淘宝，今日头条，微信内分享的等独立的，小的h5，可以是广告，营销，活动，展示页，秀肌肉，好玩的h5，如[这些](http://www.ih5.cn/not-logged-in/template)。\n还有我们的例子：\n[美柚吃鸡游戏](https://uedkit.meiyou.com/annualmeeting/game/)\n\n## 特点\n\n1. 使用Node.js，是一个JavasScript的全栈的H5解决方案，工程可直接部署\n2. 高效率开发，支持一键创建模块（业务模块、一键编译发布、上传、生产代码分析等快捷命令\n3. 工程结构良好划分，结构清晰，可维护。\n4. 🔥 (新) 支持Vue SSR 与无框架的模板\n5. 支持development,producton环境区分\n6. 支持sass、less、postcss\n7. 开发环境CSS、JS热编译\n8. 文件上传支持阿里OSS，七牛云等\n9. 加入[手淘flexible布局方案](https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html)，适配不同尺寸和DPI的屏幕\n10. 支持pm2集群启动\n\n\n## Document\n* [全局安装](#全局安装)\n* [创建一个工程](#创建一个工程)\n* [指令介绍](#指令介绍)\n* [新建一个模块](#新建一个模块)\n* [指定模块启动](#指定模块启动)\n* [指定模块编译](#指定模块编译)\n* [上传](#上传)\n    * [七牛云CDN](#七牛云cdn)\n    * [阿里云OSS](#阿里云oss)\n* [配置](#配置)\n* [TodoList](#TodoList)\n\n## 全局安装 ⚙️\n\n### 环境要求\n\nnode环境：node.js 6.11.0\n\n操作系统：支持 mac，windows，centos\n\n### 全局安装\n\n```bash\nnpm install multipages-generator -g  //目前最新版本为1.5.x\n```\n\n## 创建一个工程 📽\n\n初始化工程\n```bash\nmeet init\n```\n\n选择模板：\n- No JavaScript framework 为无框架的模板，可以自行选择需要的开发框架，jQuery，zepto，vue，react等\n- Vue width SSR  为选择Vue框架的版本，默认带了SSR\n```bash\n? Select your JavaScript framework (Use arrow keys)\n❯ No JavaScript framework \n  Vue width SSR \n```\n\n完成了项目创建，提示运行\n```bash\nC:\\xxx\\workspace\u003emeet init\n? Project name: h5-project\n  __  __           _      ____ _     ___\n |  \\/  | ___  ___| |_   / ___| |   |_ _|\n | |\\/| |/ _ \\/ _ \\ __| | |   | |    | |\n | |  | |  __/  __/ |_  | |___| |___ | |\n |_|  |_|\\___|\\___|\\__|  \\____|_____|___|\n\n   [Success] Project h5-project init finished, be pleasure to use 😊!\n\n   Install dependencies:\n     cd h5-project \u0026\u0026 npm install\n\n   Run the app:\n     meet start demo\n   Or:\n     pm2 start process.json\n\n```\n\n## 指令介绍\n查看指令帮助 meet -help\n```bash\nC:\\xxx\\workspace\u003emeet -help\n\n  Usage: meet [command]\n\n  Options:\n\n    -v, --version                 output the version number\n    -h, --help                    output usage information\n\n  Commands:\n\n    init                          initialize your project\n    new [module]/[module]-[page]  generate_native a new module\n    start [module]                start application in development mode\n    build [module]                build a module using webpack\n    upload                        upload dist files to CDN\n    analyse                       analysis dist files size and percent\n    git                           auto git commit and push\n\n```\n注意，创建模块使用meet new [module]，如果是在该模块下创建其他页面，则使用meet new [module]-[page]。举例：在demo下创建一个详情页面detail.html 使用 meet new demo-detail\n\n## 新建一个模块\n\nmeet new [module]/[module]-[page]\n\n```bash\nmeet new game  // 创建游戏模块（默认index页面）   \n```\n由于是多页面的，所以你可能还会创建一个详情页面\n```\nmeet new game-detail // 创建游戏模块下的详情页面\n```\n\n得到一个文件结构\n```bash\ngame\n ├─images // 由于没有文件，可能不会创建，开发者自行创建images\n ├─js\n | ├─index\n | | ├─business.js  // 具体业务层（可根据业务复杂度再细分）\n | | ├─service.js   // 数据处理层\n | | └─util.js      // 工具类函数层\n | └─index.js       // 主逻辑层\n ├─styles\n | └─index.css      // css\n └─views\n   └─index.html     // html源文件\n```\n\n## 指定模块启动\n### meet start [module]\n\n```\nmeet start demo\n```\n启动后会出现如下显示，可点击相应的地址访问\n```\n √ Build done\n\n[Tips] visit: http://localhost:8080/demo/\n            : http://192.168.50.194:8080/demo/\n\n```\n\n注意： Vue CSR: http://localhost:8080/demo/?csr=true\n\n### 热编译\n\nJS、CSS支持热编译，HTML需要刷新\n\n![image](http://cnd.yintage.com/HRM.gif)\n\n生成的html文件中有如下两处标记，用来热编译用。无需担心，编译阶段会删除。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-CN\"\u003e\n\u003chead\u003e\n  \u003c% include ../head.html %\u003e\n  \u003ctitle\u003edemo\u003c/title\u003e\n  \u003c!--@hot-reload, will auto remove after compiled--\u003e\n  \u003clink rel=\"stylesheet\" data-hr=\"hot-reload\" href=\"/demo/styles/index.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv\u003e内容...\u003c/div\u003e\n  \u003c!--@hot-reload, will auto remove after compiled--\u003e\n  \u003cscript type=\"text/javascript\" data-hr=\"hot-reload\" src=\"/common/js/hot-reload.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 指定模块编译\n\n### meet build [demo]\n\n```bash\nmeet build demo\n```\n\n```bash\nC:xxx\\workspace\\h5\u003emeet build demo\n\n\u003e mg-template@1.0.0 build C:\\meetyou\\workspace\\test\\mg-workspace\\h5\n\u003e cross-env NODE_ENV=production node build/commands/build.js \"demo\"\n\nDelete dist directory!\n  ⣾ Building...\n  ⣽ lasted 1 seconds. HTML去除开发环境hotReload代码: ..\\server\\views\\prod\\demo\\index.html\nHash: 2a217fb45f03fb354254\nVersion: webpack 4.17.2\nTime: 1687ms\nBuilt at: 2018-09-06 19:50:40\n                               Asset      Size  Chunks             Chunk Names\n                  index.12969e6e.css  4.71 KiB       0  [emitted]  index\n                   index.080a1e3d.js  1.01 KiB       0  [emitted]  index\n..\\server\\views\\prod\\demo\\index.html  3.74 KiB          [emitted]\nEntrypoint index = index.12969e6e.css index.080a1e3d.js\n\nUpload dist files to Qiniu CDN：\nWebpack Bundle Analyzer is started at http://127.0.0.1:8888\nUse Ctrl+C to close it\n[Success]: 上传文件至七牛云CDN成功！文件地址:http://cnd.yintage.com/index.080a1e3d.js\n[Success]: 上传文件至七牛云CDN成功！文件地址:http://cnd.yintage.com/index.12969e6e.css\n[Success]: 上传完毕 😊!\nUse Ctrl+C to close it\n\n```\n编译后分析会调用webpack插件显示每个js，css的依赖情况\n\n![image](http://cnd.yintage.com/build.png)\n\n### meet analyse\n通过meet analyse 查看占比\n\n![image](http://cnd.yintage.com/chart.png)\n\n## 上传\n\n### meet upload\n上传的是dist文件夹中的文件，配置阿里云，七牛云请看mg.config.js\n```bash\nmeet upload\n```\n\n## 配置\n### mg.config.js\nMG目前支持发布时自动,支持阿里OSS、七牛云\n\nmg.config.js 中有如下配置\n\n```\nmodule.exports = {\n\n    // 启动的客户端服务器端口\n    clientPort: '8080',\n\n    // 服务端服务器端口\n    server: {\n        port: '8090',\n    },\n\n    // 上传相关配置\n    upload: {\n        cdn: '//oflt40zxf.bkt.clouddn.com/',\n        projectPrefix: 'nodejs-common',\n\n        // 如果是阿里云，则aliconfig配置一个空对象，目前采用.aliossacess 文件配置的方式\n        // aliconfig: {\n        //\n        // },\n        // 七牛云\n\n        qconfig: {\n            ACCESS_KEY: 'ei1uOdGpVLliA7kb50sLcV9i4wfYLPwt5v0shU10',\n            SECRET_KEY: '-pFFIY-ew35Exyfcd67Sbaw40k15ah3UfZTFWFKF',\n            bucket:'hotshots-image',\n            origin:'http://cnd.yintage.com'\n        },\n\n        // 是否编译后自动上传\n        autoUpload: true\n\n    }\n};\n\n```\n\n## Todo List\n1. 更好的支持Vue SSR，类似nuxt\n2. 支持react， react-ssr\n\n## Contribution\n\n[吴俊川](https://github.com/wujunchuan)\n\n感谢俊川提供的热更新方案的建议，以及对项目某些细节的改进\n\n## 配套部署方案请参考\n[30分钟快速部署到云服务器上](http://medium.yintage.com/?p=248)\n\n\n## License\n\nThe MIT License 请自由享受开源。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinweiwei123%2Fmultipages-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinweiwei123%2Fmultipages-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinweiwei123%2Fmultipages-generator/lists"}