https://github.com/linweiwei123/multipages-generator
🥇 generator for multiple pages webpack application
https://github.com/linweiwei123/multipages-generator
express flexible frontend node-module nodejs optimization webpack
Last synced: 24 days ago
JSON representation
🥇 generator for multiple pages webpack application
- Host: GitHub
- URL: https://github.com/linweiwei123/multipages-generator
- Owner: linweiwei123
- Created: 2018-03-12T11:05:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:14:54.000Z (over 2 years ago)
- Last Synced: 2025-03-31T08:09:02.951Z (about 1 month ago)
- Topics: express, flexible, frontend, node-module, nodejs, optimization, webpack
- Language: JavaScript
- Homepage: https://linweiwei123.github.io/multipages-generator/
- Size: 2.68 MB
- Stars: 355
- Watchers: 11
- Forks: 39
- Open Issues: 18
-
Metadata Files:
- Readme: README-zh.md
Awesome Lists containing this project
README
[English](./README.md) | 中文
multipages-generator [](http://badge.fury.io/js/multipages-generator)
======
[](https://nodei.co/npm/multipages-generator)
multipages-generator （MG） 🤡是一个像express-generator一样快速生成网站开发脚手架的npm模块，完整的移动端h5解决方案，快速、高效、良好兼容性、高性能。
## 适合场景
如美柚，淘宝，今日头条，微信内分享的等独立的，小的h5，可以是广告，营销，活动，展示页，秀肌肉，好玩的h5，如[这些](http://www.ih5.cn/not-logged-in/template)。
还有我们的例子：
[美柚吃鸡游戏](https://uedkit.meiyou.com/annualmeeting/game/)
## 特点
1. 使用Node.js，是一个JavasScript的全栈的H5解决方案，工程可直接部署
2. 高效率开发，支持一键创建模块（业务模块、一键编译发布、上传、生产代码分析等快捷命令
3. 工程结构良好划分，结构清晰，可维护。
4. 🔥 (新) 支持Vue SSR 与无框架的模板
5. 支持development,producton环境区分
6. 支持sass、less、postcss
7. 开发环境CSS、JS热编译
8. 文件上传支持阿里OSS，七牛云等
9. 加入[手淘flexible布局方案](https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html)，适配不同尺寸和DPI的屏幕
10. 支持pm2集群启动
## Document
* [全局安装](#全局安装)
* [创建一个工程](#创建一个工程)
* [指令介绍](#指令介绍)
* [新建一个模块](#新建一个模块)
* [指定模块启动](#指定模块启动)
* [指定模块编译](#指定模块编译)
* [上传](#上传)
* [七牛云CDN](#七牛云cdn)
* [阿里云OSS](#阿里云oss)
* [配置](#配置)
* [TodoList](#TodoList)
## 全局安装 ⚙️
### 环境要求
node环境：node.js 6.11.0
操作系统：支持 mac，windows，centos
### 全局安装
```bash
npm install multipages-generator -g //目前最新版本为1.5.x
```
## 创建一个工程 📽
初始化工程
```bash
meet init
```
选择模板：
- No JavaScript framework 为无框架的模板，可以自行选择需要的开发框架，jQuery，zepto，vue，react等
- Vue width SSR 为选择Vue框架的版本，默认带了SSR
```bash
? Select your JavaScript framework (Use arrow keys)
❯ No JavaScript framework
Vue width SSR
```
完成了项目创建，提示运行
```bash
C:\xxx\workspace>meet init
? Project name: h5-project
__ __ _ ____ _ ___
| \/ | ___ ___| |_ / ___| | |_ _|
| |\/| |/ _ \/ _ \ __| | | | | | |
| | | | __/ __/ |_ | |___| |___ | |
|_| |_|\___|\___|\__| \____|_____|___|
[Success] Project h5-project init finished, be pleasure to use 😊!
Install dependencies:
cd h5-project && npm install
Run the app:
meet start demo
Or:
pm2 start process.json
```
## 指令介绍
查看指令帮助 meet -help
```bash
C:\xxx\workspace>meet -help
Usage: meet [command]
Options:
-v, --version output the version number
-h, --help output usage information
Commands:
init initialize your project
new [module]/[module]-[page] generate_native a new module
start [module] start application in development mode
build [module] build a module using webpack
upload upload dist files to CDN
analyse analysis dist files size and percent
git auto git commit and push
```
注意，创建模块使用meet new [module]，如果是在该模块下创建其他页面，则使用meet new [module]-[page]。举例：在demo下创建一个详情页面detail.html 使用 meet new demo-detail
## 新建一个模块
meet new [module]/[module]-[page]
```bash
meet new game // 创建游戏模块（默认index页面）
```
由于是多页面的，所以你可能还会创建一个详情页面
```
meet new game-detail // 创建游戏模块下的详情页面
```
得到一个文件结构
```bash
game
├─images // 由于没有文件，可能不会创建，开发者自行创建images
├─js
| ├─index
| | ├─business.js // 具体业务层（可根据业务复杂度再细分）
| | ├─service.js // 数据处理层
| | └─util.js // 工具类函数层
| └─index.js // 主逻辑层
├─styles
| └─index.css // css
└─views
└─index.html // html源文件
```
## 指定模块启动
### meet start [module]
```
meet start demo
```
启动后会出现如下显示，可点击相应的地址访问
```
√ Build done
[Tips] visit: http://localhost:8080/demo/
: http://192.168.50.194:8080/demo/
```
注意： Vue CSR: http://localhost:8080/demo/?csr=true
### 热编译
JS、CSS支持热编译，HTML需要刷新
生成的html文件中有如下两处标记，用来热编译用。无需担心，编译阶段会删除。
```html
<% include ../head.html %>
demo
内容...
```
## 指定模块编译
### meet build [demo]
```bash
meet build demo
```
```bash
C:xxx\workspace\h5>meet build demo
> [email protected] build C:\meetyou\workspace\test\mg-workspace\h5
> cross-env NODE_ENV=production node build/commands/build.js "demo"
Delete dist directory!
⣾ Building...
⣽ lasted 1 seconds. HTML去除开发环境hotReload代码: ..\server\views\prod\demo\index.html
Hash: 2a217fb45f03fb354254
Version: webpack 4.17.2
Time: 1687ms
Built at: 2018-09-06 19:50:40
Asset Size Chunks Chunk Names
index.12969e6e.css 4.71 KiB 0 [emitted] index
index.080a1e3d.js 1.01 KiB 0 [emitted] index
..\server\views\prod\demo\index.html 3.74 KiB [emitted]
Entrypoint index = index.12969e6e.css index.080a1e3d.js
Upload dist files to Qiniu CDN：
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
[Success]: 上传文件至七牛云CDN成功！文件地址:http://cnd.yintage.com/index.080a1e3d.js
[Success]: 上传文件至七牛云CDN成功！文件地址:http://cnd.yintage.com/index.12969e6e.css
[Success]: 上传完毕 😊!
Use Ctrl+C to close it
```
编译后分析会调用webpack插件显示每个js，css的依赖情况
### meet analyse
通过meet analyse 查看占比
## 上传
### meet upload
上传的是dist文件夹中的文件，配置阿里云，七牛云请看mg.config.js
```bash
meet upload
```
## 配置
### mg.config.js
MG目前支持发布时自动,支持阿里OSS、七牛云
mg.config.js 中有如下配置
```
module.exports = {
// 启动的客户端服务器端口
clientPort: '8080',
// 服务端服务器端口
server: {
port: '8090',
},
// 上传相关配置
upload: {
cdn: '//oflt40zxf.bkt.clouddn.com/',
projectPrefix: 'nodejs-common',
// 如果是阿里云，则aliconfig配置一个空对象，目前采用.aliossacess 文件配置的方式
// aliconfig: {
//
// },
// 七牛云
qconfig: {
ACCESS_KEY: 'ei1uOdGpVLliA7kb50sLcV9i4wfYLPwt5v0shU10',
SECRET_KEY: '-pFFIY-ew35Exyfcd67Sbaw40k15ah3UfZTFWFKF',
bucket:'hotshots-image',
origin:'http://cnd.yintage.com'
},
// 是否编译后自动上传
autoUpload: true
}
};
```
## Todo List
1. 更好的支持Vue SSR，类似nuxt
2. 支持react， react-ssr
## Contribution
[吴俊川](https://github.com/wujunchuan)
感谢俊川提供的热更新方案的建议，以及对项目某些细节的改进
## 配套部署方案请参考
[30分钟快速部署到云服务器上](http://medium.yintage.com/?p=248)
## License
The MIT License 请自由享受开源。