cyo-cli

1.4.2 • Public • Published

h5 项目构建工具

安装
npm i -g cyo-cli
 
 
yarn global add cyo-cli
正式打包
cyo build
本地开发
cyo dev
功能列表
  • 单页面打包
  • 多页面打包
  • 按需导入 es 补丁(polyfill)
  • 按需移除没有用到的代码
  • 支持最新的所有 esnext 语法(es5es6es7es8)
  • 支持 less scss stylus css 预编译器语法
  • 支持 pug html 预编译器语法
  • 支持构建 vue 项目
  • 构建工具依赖包迁移至全局,所有项目通用
  • 移动端支持所有浏览器 flex 布局
  • 添加 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?:
        | { contextstring[]; targetstring; changeOrigintrue }[]
        | { [keystring]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

Package Sidebar

Install

npm i cyo-cli

Weekly Downloads

4

Version

1.4.2

License

MIT

Unpacked Size

32.7 kB

Total Files

42

Last publish

Collaborators

  • imcoka