English 中文

multipages-generator NPM version

NPM

multipages-generator （MG） 🤡是一个像express-generator一样快速生成网站开发脚手架的npm模块，完整的移动端h5解决方案，快速、高效、良好兼容性、高性能。

适合场景

如美柚，淘宝，今日头条，微信内分享的等独立的，小的h5，可以是广告，营销，活动，展示页，秀肌肉，好玩的h5，如这些。 还有我们的例子： 美柚吃鸡游戏

特点

  1. 使用Node.js，是一个JavasScript的全栈的H5解决方案，工程可直接部署
  2. 高效率开发，支持一键创建模块（业务模块、一键编译发布、上传、生产代码分析等快捷命令
  3. 工程结构良好划分，结构清晰，可维护。
  4. 🔥 (新) 支持Vue SSR 与无框架的模板
  5. 支持development,producton环境区分
  6. 支持sass、less、postcss
  7. 开发环境CSS、JS热编译
  8. 文件上传支持阿里OSS，七牛云等
  9. 加入手淘flexible布局方案，适配不同尺寸和DPI的屏幕
  10. 支持pm2集群启动

Document

全局安装 ⚙️

环境要求

node环境：node.js 6.11.0

操作系统：支持 mac，windows，centos

全局安装

npm install multipages-generator -g  //目前最新版本为1.5.x

创建一个工程 📽

初始化工程

meet init

选择模板：

完成了项目创建，提示运行

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

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]

meet new game  // 创建游戏模块（默认index页面）

由于是多页面的，所以你可能还会创建一个详情页面

meet new game-detail // 创建游戏模块下的详情页面

得到一个文件结构

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需要刷新

image

生成的html文件中有如下两处标记，用来热编译用。无需担心，编译阶段会删除。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <% include ../head.html %>
  <title>demo</title>
  <!--@hot-reload, will auto remove after compiled-->
  <link rel="stylesheet" data-hr="hot-reload" href="/demo/styles/index.css">
</head>
<body>
  <div>内容...</div>
  <!--@hot-reload, will auto remove after compiled-->
  <script type="text/javascript" data-hr="hot-reload" src="/common/js/hot-reload.js"></script>
</body>
</html>

指定模块编译

meet build [demo]

meet build demo

C:xxx\workspace\h5>meet build demo

> mg-template@1.0.0 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的依赖情况

image

meet analyse

通过meet analyse 查看占比

image

上传

meet upload

上传的是dist文件夹中的文件，配置阿里云，七牛云请看mg.config.js

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

吴俊川

感谢俊川提供的热更新方案的建议，以及对项目某些细节的改进

配套部署方案请参考

30分钟快速部署到云服务器上

License

The MIT License 请自由享受开源。