mpd-cli

一个基于webpack的多页面开发脚手架。

安装

请确认系统环境符合以下标准：

v1.1.3以下版本： Node.js 8.x+, npm 5.8.0+；

v1.1.3+ 版本需： Node.js 10.19.0+, npm 6.13.4+

$ npm i -g mpd-cli

安装完成后，可以在命令行中运行 mpd 命令，看看是否展示出一份可用命令的帮助信息，来验证它是否安装成功。

使用

创建项目

运行 mpd init，按提示完成创建；

$ mpd init
$ cd 刚才填写的项目名称
 
# v1.0.13+ 无需再运行安装命令
$ npm i

新增页面或组件

# 使用 -p 添加名为 demo的页面
$ mpd add -p demo
 
# 使用 -p 添加名为 demo的M版页面
$ mpd add -pm demo
 
# 使用 -c 添加名为 test的组件
$ mpd add -c test
 
# 使用 -r 可以对已有页面进行重命名 将index 改为 demo
$ mpd add -pr index demo
 
# 使用 -f 可以强制覆盖同名页面，注意覆盖后，原同名文件的内容都将丢失。请谨慎使用。
$ mpd add -pf index
 
# 使用 -d 下载最新模版添加页面
$ mpd add -pd index

启动调试服务器，在项目根目录运行

$ mpd dev

构建打包项目，在项目根目录运行

$ mpd build

当出现编译失败时，请根据错误提示，修改相应的文件。当代码符合eslint的规范时，即可成功编译。

功能

✅ css 预处理器支持 scss (未来2.0beta版会取消对less的支持，请直接使用scss)

✅ es6 -> es5

✅ eslint 遵循规则 standard

✅ stylelint 遵循规则 standard

别名alias

别名	对应目录
@	common
组件名	components/组件名

创建的组件会实时更新到alias，无需重启即可直接引用。

项目目录介绍

请勿在项目的开发目录内随意添加目录

|--assets 静态资源目录（iconfont目录请放在此，css样式文件允许除下面3个目录外，还可放在assets内）
|--common 公共目录 （less、scss样式文件，仅可放在 common,components,pages三个目录内)
|--components 组件目录
|--pages 页面目录

引用

请使用 import取代require来引入资源。

// common 目录内的js引用
import util from '@/util'
 
// 组件demo 的引用
import 'demo'
 
// 请注意引用位置：
// 示例：index.js 内
import '@/common'
// 请在 页面的scss文件前引用 组件
import 'demo'
import './index.scss'
// 请在 页面scss文件后引用公共目录的文件
import util from '@/util'
 

图片资源的引用

假设config内配置的publicPath 的 source 和 img 的值都为：http://img.dev.cn

1、“/” 指代 “assets”文件夹，仅HTML内的IMG标签可用

示例：

<!-- v1.0.10+ 皆支持该用法 -->
<!-- 以前旧版本中使用 /assets/images 的需要及时更换成 / ；未来2.0beta版本将不在支持该写法 -->
<!-- 根据调试服务器静态资源配置引用资源 -->
<img src="/images/demo.png">
 
<!-- 打包编译后： -->
<img src="http://img.dev.cn/images/demo.png">

2、按文件的真实路径引用

方法1：require

${require('')}

• HTML

<!-- 内联样式里的图片，注意用require的方式引用图片路径时，路径需按照文件真实路径填写 -->
<div class="img-box" style="background-image:url(${require(`../../assets/images/img_m.png`)});"></div>
 
<!-- 打包编译后： -->
<div class="img-box" style="background-image: url(http://img.dev.cn/images/img_m.png);"></div>

• JS

/* 按文件真实路径来引用图片资源 */
const htm = `<img src="${require('../../assets/images/demo.png')}" />`

方法2: 直接引用

• CSS

body {
  background: url('../../assets/images/demo.png') no-repeat;
}

mpd.config.js

该项目的mpd-cli配置。

该配置信息改动后，需要重新运行调试服务器才可生效。

module.exports = {
  /**
   * 第三方库引入
   * @type {Array} 
   */
  plugins:{
    /**
     * 所有页面都引入的库
     * 引入的路径若不是以"http"或"//"开头，则在打包时会自动为其添加 publichPath.source 的前缀。
     * @type {Array} 
     * 仅global内支持 字符和对象两种类型
     */
    global:[
        /* 直接填入需要引入库的路径 */
        'https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js',
        /* 
        * 或填入对象，可配置:
        * ishead 放置在头部；默认false
        * islast 放置在所有资源的末尾，通常用于添加统计类资源；默认false
        * ignore 为true时，打包默认不引入该路径；默认false
        * url为引入库路径 
            e.g:
            { ishead: true, url: 'https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js' },
        */
    ],
    /**
     * 指定页面引入库
     * @type {Array} 
     */
    assign:[
        {
            pages:['index'], // 填写页面名称；支持多个页面共用一套引入方案
            urls:[
                'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css',
                'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'
            ]
        }
    ]
  },
  /*
  * dev 和 build 拥有一样的可配置项有:
  * dir, output
   */
  dev:{
    /**
     * 启用代理 启用代理需要配置 proxy
     * @type {Boolean} 默认false
     */
    openProxy: true,
    /**
     * 设置代理对应关系，可配置多个
     * @type {Object} 
     */
    proxy:{
      '/api': {
        target: 'http://api.mpd-cli.com/',
        changeOrigin: true,
        pathRewrite: { 
            '^/api': ' '
        }
      }
    },
    /**
     * 启用https
     * @type {String} 默认false
     */
    openHttps: true,
    /**
     * 是否开启检查模式
     * @type {Boolean} 默认false
     */
    openLint: false,
    /**
     * 设置 dev服务器端口号 多开时需要手动修改避免重复
     * @type {Number} 默认9100
     */
    port: 9100,
    
        /**
     * 自动刷新监听端口 多开时需要手动修改避免重复
     * @type {Number} 
     */
    liveport: 35729,
 
    /**
     * 启用页面自动刷新
     * @type {Boolean} 默认false
     */
    livereload: true,
 
    /**
     * dev服务器启动自动打开页面
     * @type {Boolean} 默认false
     */
    autoopen: true,
    /**
     * 启用uglify
     * @type {Boolean} 默认 true
     */
    useUglify: true,
    /**
     * 兼容ie8，开启ie8兼容，就必须开启uglify，否则无法生效
     * @type {Boolean} 默认 true
     */
    ie8: true,
    /**
     * 图片在指定b内的编译成base64格式
     * @type {Number|Boolean} false时不编译base64 
     */
    imgBase64: 1024,
    /**
     * 是否保留console信息
     * @type {Boolean} 默认 true。dev模式下默认开启
     */
    debug: true
  },
 
  build:{
    /**
     * 打包前删除打包目录
     * @type {Boolean} 默认true
     */
    clean: false,
    /**
     * 导出HTML文件
     * @type {Boolean} 默认true
     */
    outHtml: true,
    /**
     * 启用HTML压缩
     * @type {Boolean} 默认false
     */
    openMinify: false,
    /**
     * HTML页面是否设置favicon
     * @type {Boolean} 默认false
     */
    favicon: false,
    /**
     * 项目目录
     * @type {String} 默认根目录无需填写
     */
    dir:'',
    /**
     * 设置打包目录名称
     * @type {String} 默认dist
     */
    output:'dist',
    /**
     * 图片资源的发布路径
     * 注意填写的路径末尾避免使用 '/'
     * @type {Object} 默认 为空
     */
    publicPath: {
        source: '',
        img: ''
    },
    /**
     * 启用uglify
     * @type {Boolean} 默认 true
     */
    useUglify: true,
    /**
     * 兼容ie8，开启ie8兼容，就必须开启uglify，否则无法生效
     * @type {Boolean} 默认 true
     */
    ie8: true,
    /**
     * 图片在指定b内的编译成base64格式
     * @type {Number|Boolean} false时不编译base64 
     */
    imgBase64: 1024,
    /**
     * 是否保留console信息
     * @type {Boolean} 默认 false
     */
    debug: false
  }
}

router.js

router.js配置的路由仅对本地调试服务器生效，不影响打包编译代码。该功能是为了方便保持与线上场景的访问路径一致，避免上线前重新更改路径。

可在 router.js 中对项目路由进一步配置，来达到同步线上场景的访问路径。

router.js内容变更后实时生效，无需重启

默认所有页面的可以直接通过 http://localhost:9100/[name].html 和 http://localhost:9100/[name]路径访问。

访问路由时，允许携带query参数。(不需在router.js配置query信息)

配置路由时，应注意避免配置 “/” 和 “/c” 两个路径

module.exports  =  {
  /**
   * key : value
   * key 写法参考：/ ， /user ， /users/:id ， /users_:id ，/users_p_:id
   * 变量（:id）仅可出现一次，遇到需要多个变量的情况，请选择写死多余变量来实现
   * 多个变量需使用/隔断
   * value pages目录内的页面名称，省略 .html后缀
   */
  '/p': 'page'
}