h5 项目构建工具

安装

npm i -g cyo-cli

或

yarn global add cyo-cli

正式打包

cyo build

本地开发

cyo dev

功能列表

• [x] 单页面打包
• [x] 多页面打包
• [x] 按需导入 es 补丁(polyfill)
• [x] 按需移除没有用到的代码
• [x] 支持最新的所有 esnext 语法(es5、es6、es7、es8)
• [x] 支持 less scss stylus css 预编译器语法
• [x] 支持 pug html 预编译器语法
• [x] 支持构建 vue 项目
• [x] 构建工具依赖包迁移至全局，所有项目通用
• [x] 移动端支持所有浏览器 flex 布局
• [x] 添加 eslint 校验
• [ ] 一键生成项目模板
• [ ] 支持构建 react 项目
• [ ] 支持构建 angular4+ 项目
• [ ] 支持最新的所有 typescript 语法

注意事项：

• node 版本升级至 v10.5.0 以上；
• 该脚手架安装在==全局==，执行构建在对应项目根目录；
• 适用于该脚手架的配置文件 cyo.config.js 请放至项目根目录，或在 package.json 添加 cyo 字段配置(可选)；
• 单页面应用，异步模块 chunkName 不能起名index,会导致主引导冲突；
• 单页面应用，放 main.js(必须) index.html (可选)文件到src文件夹下；
• 多页面应用，放 main.js(必须) template.html(可选) 文件到pages下；
• 开发环境修改eslint配置之后需要 cyo -c 清除一下缓存；

单页面目录

源代码

├─ src
│  ├─ main.js
│  ├─ index.html(可选)

打包后

├─ assets
│  ├─ css
│  │  ├─ index.********.min.css
│  │  ├─ runtime.********.min.css
│  │  ├─ vendor.********.min.css
│  │  ├─ common.********.min.css
│  ├─ js
│  │  ├─ index.********.min.js
│  │  ├─ runtime.********.min.js
│  │  ├─ vendor.********.min.js
│  │  ├─ common.********.min.js

多页面目录

源代码

├─ src
│  ├─ pages
│  │  ├─ main.js
│  │  ├─ template.html(可选)
│  │  ├─ home
│  │  │  ├─ main.js
│  │  │  ├─ template.html(可选)
│  │  └─ user
│  │  │  ├─ main.js
│  │  │  ├─ template.html(可选)


publicPath=undefined 打包后

├─ assets
│  ├─ css
│  │  ├─ index.********.min.css
│  │  ├─ home.********.min.css
│  │  ├─ user.********.min.css
│  │  ├─ ...
│  ├─ js
│  │  ├─ index.********.min.js
│  │  ├─ home.********.min.js
│  │  ├─ user.********.min.js
│  │  ├─ ...
│  ├─ index.html
│  ├─ home.html
│  ├─ user.html

publicPath='../' 打包后

├─ assets
│  ├─ css
│  │  ├─ index.********.min.css
│  │  ├─ home.********.min.css
│  │  ├─ user.********.min.css
│  │  ├─ ...
│  ├─ js
│  │  ├─ index.********.min.js
│  │  ├─ home.********.min.js
│  │  ├─ user.********.min.js
│  │  ├─ ...
│  ├─ index
│  │  ├─ index.html
│  ├─ home
│  │  ├─ index.html
│  ├─ user
│  │  ├─ index.html

默认配置

interface CyoConfig {
	/**
	 * 构建目标
	 * 默认: []  普通web项目
	 */
	target?: 'vue' | string[]
	/**
	 * 是否多页面应用
	 * 默认: false
	 */
	isMultiple?: boolean
	/**
	 * 是否启用eslint
	 * 默认: false
	 */
	eslint?: {
		/**
		 * 全局变量
		 */
		globals?: {
			[key: string]: boolean
		}
		/**
		 * 规则
		 */
		rules?: {
			[key: string]: number | string | EslintRulesParam[]
		}
		/**
		 * prettier配置
		 * docs:https://prettier.io/docs/en/options.html
		 */
		prettier: {
			[key: string]: any
		}
	}
	/**
	 * 静态发布目录前缀
	 * 默认: undefined
	 */
	publicPath?: string
	/**
	 * 代理配置
	 * 默认: {}
	 * '/pointgate': 'http://test-m-stg.changyoyo.com'
	 *
	 * '/pointgate':{
	 * 		target: 'https://test-m-stg.changyoyo.com',
	 *    changeOrigin: true
	 * }
	 *
	 * [{
	 * 		context:['/pointgate', '/sign'],
	 * 		target: 'https://test-m-stg.ppppoints.com',
	 *    changeOrigin: true
	 * }]
	 */
	proxy?:
		| { context: string[]; target: string; changeOrigin: true }[]
		| { [key: string]: string | object }
	/**
	 *	本地开发服务器运行端口
	 *  默认: 8765
	 */
	port?: number
	/**
	 * 文件拷贝
	 * 默认 {}
	 * 文档参考 https://github.com/webpack-contrib/copy-webpack-plugin
	 */
	copy: {
		patterns?: any[]
		options?: {
			ignore?: Array<string | any>
			copyUnmodified?: boolean
			debug?: 'warning' | 'info' | true | 'debug'
		}
	}
	/**
	 * 外部排除构建文件配置
	 * 默认: {}
	 *
	 * {
	 * 		vue: 'Vue',
	 * 		'vue-router': 'VueRouter',
	 * 		react: 'React',
	 * }
	 */
	externals?: { [key: string]: string }
	/**
	 * 默认导入文件后缀扩展  import user from './user' === import user from './user/index.vue'
	 * 默认: [ '.js', '.jsx', '.ts', '.tsx', '.es', '.cjs', '.vue', '.json', '.ejs', '.html', '.pug', '.styl', '.stylus']
	 */
	fileExtension?: string[]
	/**
	 * babel插件的配置
	 * 包必须require()
	 *  [
	 *  require('babel-plugin-component'),
	 *  	{
	 *    	libraryName: 'element-ui',
	 *    	styleLibraryName: 'theme-chalk'
	 *  	}
	 *	]
	 */
	babelPlugin?: object[]
	/**
	 * 最终生成的默认模板后缀名
	 * 默认 html
	 */
	htmlExt: string
}

type EslintRulesParam = string | object