multiple-cli v7.0.0

特性

• 支持多页面
• 支持开发环境动态预览PHP模版(内部框架/Smarty模版)
• 支持Mock Server
• 支持任意CSS/JS文件切割
• 支持IE8
• 支持TS/ESlint
• 支持自动压缩图片
• 内置Preact alias

基础

安装

// 请使用内部库安装

npm install @multiple/cli -g

附：内部库使用指南

创建项目

• 运行命令

multi init

• 根据提示选择multi多页模版或multi-demo模版（内含示例代码）

运行

• 进入开发目录dev

cd ${project-name}/dev

• 开启server服务

multi server home --mock

命令

开发环境

基础命令

multi server [config/pages/下的路径]

示例：multi server courseDetail

命令选项

--proxy:开启本地接口代理转发

--mock:开启本地mock server

--mock --proxy:同时开启代理转发和Mock Server（Mock优先级更高）

--ie8:开启ie8兼容模式

注：可根据需要在配置文件内自定义选项

生产环境

基础命令

multi build [config/pages/下的路径]

示例：multi build courseDetail

命令选项

--ie8:开启ie8兼容模式

hybrid构建

客户端模版构建，支持自动打包zip

multi hybrid [config/pages/下的路径]

注：hybrid构建需配置config/hybrid.js

模版语法

支持art-template、PHP Smarty、内部PHP框架语法

注意项：

• 所有语法在server环境均会进行编译
• prod环境仅art-template进行编译，其他将原文输出
• 可利用以上特性，抽离通用子模版，在父模版中通过PHP语法include，并在生产环境中通过copy-webpack-plugin将子模版输出至目标路径。此方案优点：通用子模版有变更时无需更新所有父模版

配置项

页面配置

文件路径：config/**/\*.json

• 通用配置

  Name	Type	Default	Required	Description
  entry	string、array、object	无	true	入口文件路径（process.cwd() + 路径）
  type	string	无	false	页面类型（可选：preact）
  reg	regx string	^${entry}.*	false	参照文件切割说明
  tpl	object	无	true	参照模版配置

• 模版配置

  Name	Type	Default	Required	Description
  path	string	无	true	模版路径（process.cwd() + 路径）
  mock	string	无	false	模版Mock文件路径（config.mockBasePath + 此路径）
  reg	string	^basename(tpl || output).*	false	参照文件切割说明
  output	string	path	false	输出路径

环境配置

• 公共配置(开发、生产环境均适用)

  Name	Type	Default	Description
  plugins	array	无	webpack plugins
  customConfig	({ pageConfig="页面配置", mode="构建环境"}) => config	无	扩展Webpack配置
  ts	boolean	false	是否支持ts
  eslint	boolean	false	是否支持eslint
  ie8	boolean	false	是否支持ie8
  polyfill	string	无	polyfill文件路径，引用core-js等
  imgPublicPath	string	'/'	css中图片地址引用路径
  resolve	object	无	webpack resolve
  templateEngine	string	'art'	模版文件后缀
  templateReg	reg	/.art$/	模版通过art-loader的test规则
  templateOptions	object	无	art-template选项，参照：http://aui.github.io/art-template/zh-cn/docs/options.html
  mockBasePath	string	无	Mock文件目录（最终路径=此路径+页面配置中的mock路径）
  staticPath	string or array	无	静态资源路径（不参与打包）
  sprite	object	无	雪碧图（具体参见雪碧图配置）
  MiniCssExtractPluginOptions	object	无	MiniCssExtractPlugin.options
  tinypng	object{ext,cache,cachePath}、boolean	参照图片压缩配置	图片压缩配置

雪碧图(sprite)配置

图片压缩（tinypng）配置 （建议只在生产环境开启）

• 开发环境配置

  配置文件：config/server.js

• 生产环境配置

  配置文件:config/prod.js

  Name	Type	Default	Description
  hash	number、boolean	false	输出文件的hash长度
  uglifyjs	boolean	false	是否压缩js
  templateOutput	object{path,ext,resolveFilename}	无	模版生成配置
  outputStaticPath	string	无	静态资源输出路径

  模版生成配置（templateOutput）

  Name	Type	Default	Description
  path	string	无	模版生成的基础路径
  ext	string	.html	模版生成后缀
  resolveFilename	func(output + ext)	无	模版生成路径自定义

• Hybrid配置（选项同生产环境）

  配置文件:config/hybrid.js

语法配置

• 语法规则自定义

  配置文件:config/phpRule.js

现已支持PHP Smarty、内部PHP引擎语法，可根据项目需要调整内容

• 过滤器(filter)自定义

  配置文件:config/imports.js

已内置常用过滤器，可根据需要扩展

附加功能

文件切割

说明

可切割任意JS/CSS文件，并在模版中以特定规则自动引入

命名规则

命名以 .bd.(scss|js)为结尾，如 index.bd.scss 、index.chunk.bd.js

自动注入模版规则

• 注入所有页面规则：
  • 默认：源文件名满足^${entry}.*条件

  • 自定义：源文件名满足pageConfig.reg条件

• 注入特定页面条件
  • 默认：源文件名满足^basename(tpl || output).*条件
  • 自定义：源文件名满足pageConfig.tpl.reg条件

雪碧图使用示例

配置参考：

 sprite: {
    open: true,
    path: path.join(imagePath, 'sprites'),
    output: {
        image: imagePath,
        style: stylePath
    },
    cssImageRef: `~@/images/` // 输出的css中sprite图片的指向路径
}

参考说明：

• 散列图存放路径：images/sprites/**/*
• 自动生成的scss文件：sprites/**.scss(以sprites下的目录名拼接为命名)
• 使用方式：

<!--scss文件-->
@import '@/style/sprites/*.scss';
.icon {
    @include sprite(散列图名称);
}