畅由大前端 h5 项目构建工具

安装

npm i -g 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 布局
• [ ] 一键生成项目模板
• [ ] 添加 eslint-config-cyo eslint-plugin-cyo 校验
• [ ] 支持构建 react 项目
• [ ] 支持构建 angular4+ 项目
• [ ] 支持最新的所有 typescript 语法

注意事项：

• node 版本升级至 v10.5.0 以上
• 该脚手架安装在==全局==，执行构建在对应项目根目录；
• 适用于该脚手架的配置文件 cyo.config.js 请放至项目根目录，或在 package.json 添加 cyo 字段配置
• 异步导入模块规范写法，import()添加 /* webpackChunkName: "chunkName" */ 注释, require.ensure 写法必须填写 chunkName 参数, chunkName 用于识别 chunk 块的名称。（影响打包结果）

import(/* webpackChunkName: "chunkName" */ '../view/chunkName')

require.ensure([], () => r(require('../view/chunkName')), 'chunkName')

默认配置

module.exports = {
  /**
   * 构建目标
   * vue | react
   * target: 'vue'
   */
  target: [],
  /**
   * 入口文件配置
   */
  entry: {
    index: {
      /**
       * 脚本文件配置
       */
      script: './src/main.js',
      /**
       * 模板配置
       */
      teamlate: './src/index.html'
    }
  },
  /**
   * html文件导出路径
   */
  exportHtml: {
    /**
     * 导出最终路径文件名为./index.html
     */
    index: './'
    // home: './home/home.html'
    // apps: './apps/index.html'
  },
  /**
   * 源码目录
   */
  sourceDir: 'src',
  /**
   * 输出目录
   */
  outputDir: 'dist',
  /**
   * 静态资源目录
   */
  assetsDir: 'assets',
  /**
   * 静态发布目录
   */
  publicPath: '',
  /**
   * 代理配置
   */
  proxy: {
    // '/pointgate': 'http://m.changyoyo.com/'
  },
  /**
   * 开发环境端口
   */
  port: 8765,
  /**
   * 外部文件配置
   */
  externals: {
    // jquery: 'jQuery',
    // vue: 'Vue',
    // 'vue-router': 'VueRouter',
    // vuex: 'Vuex',
    // react: 'React',
    // 'react-dom': 'ReactDOM'
  },
  /**
   * 压缩后缀扩展的文件
   * gzipExtension: false 关闭gzip压缩
   */
  gzipExtension: ['.js', '.css'],
  /**
   * 导入文件后缀扩展
   */
  fileExtension: ['.js', '.jsx', '.ts', '.tsx', '.es', '.cjs', '.vue', '.json'],
  /**
   * babel插件的配置
   * 包必须require()
   */
  babelPlugin: [
    // [
    //   require('babel-plugin-component'),
    //   {
    //     libraryName: 'element-ui',
    //     styleLibraryName: 'theme-chalk'
    //   }
    // ]
  ]
}