文档

支持的项目类型简介

React SPA 应用

Vue SPA 应用

React SSR 应用

  • 基于 React 框架

  • 基于 nextjs 企业级高性能 Node 框架

  • 使用 typescript 进行开发

  • 支持 koa 自定义 node 服务

  • 搜索引擎友好 SEO

    ……

React Component 组件(库)项目

Vue Component 组件(库)项目

Toolkit 工具库项目

  • 基于 dumi 开发和Demo框架

  • 使用 mocha 进行Node端的单页测试

  • 使用 karma 进行浏览器端的单页测试

  • 使用 rollup 构建项目

  • 使用 typescript 进行开发

  • 遵守 eslint 规范

  • 采用 prettier 美化代码格式

    ……

脚手架命令清单

你可以在命令行中简单输入 omni -h 查看所有的命令:

  Commands:

    init [strategy] [options]  初始化你的项目,[strategy(策略)] 可用是stable(默认) 或 lastst
    dev [options]              omni dev -p [port]
    new <module> [options]     omni new [module] [-f | -c]
    build                      根据 [omni.config.js] 打包构建你的项目
    release [options]          根据 [omni.config.js] 发布你的项目

omni init

初始化一个项目

omni init

用最新的依赖@lastest初始化项目

omni init lastest

初始化项目但不安装依赖

omni init -n

套用模板一键初始化项目

omni init -t [projectName]

or

omni init --entire [projectName]

选项

使用: omni init [strategy] [options]

Arguments:

  strategy                 stable or latest

  Options:
    -rb, --react_basic [name]       创建一个最基本的 React 单页应用
    -rs, --react_standard [name]    创建一个标准的 React 单页应用
    -re, --react_entire [name]      创建一个全量的 React 单页应用
    -vb, --vue_basic [name]         创建一个最基本的 Vue 单页应用
    -vs, --vue_standard [name]      创建一个标准的 Vue 单页应用
    -ve, --vue_entire [name]        创建一个全量的 Vue 单页应用
    -rS, --react_ssr [name]         创建一个 React SSR 应用
    -rc, --react_components [name]  创建一个 React 组件库
    -vc, --vue_components [name]    创建一个 Vue 组件库
    -t, --toolkit [name]            创建一个工具库
    -n, --no-install                初始化项目不安装任何依赖
    -P, --path <path>               创建项目的工作路径
    -h, --help               output usage information

omni dev

各种用法

  omni dev

  omni dev -p 8200 // 启动一个端口号为 8200 的开发服务

  omni dev -h dev.domain.com // 启动一个host为 dev.domain.com 的开发服务


  omni dev -p 8200 -h dev.domain.com // 启动一个端口号为 8200 且 host为 dev.domain.com 的 开发服务

选项

使用: omni dev [options]

omni dev [-p <port>] [-H <host>] [-P <path>]

Options:
  -p, --port <port>      根据指定的端口号启动开发服务
  -H, --hostname <host>  根据指定的hostname启动开发服务
  -P, --path <path>      启动开发服务的工作路径
  -h, --help             output usage information

omni start

用法和 omni dev 略同

选项

使用: omni start [options]

omni start [-p <port>] [-H <host>] [-P <path>]

Options:
  -p, --port <port>      根据指定的端口号启动生产服务
  -H, --hostname <host>  根据指定的hostname启动生产服务
  -P, --path <path>      启动生产服务的工作路径
  -h, --help             output usage information

omni new

各种用法

  omni new

  omni new Button // 新建一个名为 Button 的组件

  omni new -c // 新建一个类组件

  omni new -c Button // 新建一个名为 Button 的类组件

选项

使用: omni new [name] [options]

omni new [name] [-f | -c] [-P <path>]

Arguments:

  module           可选!组件名称。

Options:
  -f, --function     创建一个函数组件
  -c, --class        创建一个类组件
  -P, --path <path>  创建组件的工作路径
  -h, --help        output usage information

omni build

各种用法

  omni build

  omni build -n // 构建时避开所有预校验

  omni build -c $pathTo/build.config.js // 根据指定路径构建项目

选项

使用: omni build [options]

根据 [omni.config.js] 的 build 字段构建项目

Options:
  -c, --config <path>  指定构建的配置文件路径
  -n, --no-verify      绕过所有预检直接构建
  -P, --path <path>    构建的工作路径
  -h, --help           output usage information

omni release

各种用法

  omni release

  omni release -n // 发布时避开所有预校验

  omni release -a // 发布时自动迭代版本号

  omni release -i // 发布时忽略版本号的迭代

  omni release -m // 发布时手动输入迭代版本号

  omni release -t // 发布时指定 tag 名

选项

使用: omni release [options]

根据 [omni.config.js] 的 release 字段发布项目

Options:
  -a, --automatic         发布并自动迭代版本号
  -i, --ignore            发布并忽视版本号的迭代
  -m, --manual <version>  发布并手动指定版本号
  -t, --tag <tag>         发布时指定tag
  -n, --no-verify         绕过所有的预检直接发布
  -P, --path <path>       发布的工作路径
  -h, --help              output usage information

关于 「omni.config.js」 配置文件

type 项目类型

OMNI 会根据不同的项目类型决定整个初始化、构建、创建模板的过程

目前支持的项目类型有:

  • spa-react - React单页应用

  • ssr-react - React服务端渲染应用

  • component-react - React组件库

  • toolkit - SDK工具包

dev 开发服务

开发服务基于express,搭配 webpack-dev-middleware、webpack-hot-middleware、http-proxy-middleware 等中间件,实现了热更新、接口代理等常用功能,并提供了中间件的自定义、端口号、log日志输出级别、webpack配置等个性化定制方案。

  • middleware - 中间件配置,参考下面👇的类型:

    {
      route: string;
      callback: (req: any, res: any) => Promise<void>;
    }
    

    or

    (params: {
      ip: string;
      port: number;
      host?: string;
      logLevel: LOGLEVEL;
      proxyConfig?: (ProxyItem | ProxyFn)[];
    }) => {
      route: string;
      callback: (req: any, res: any) => Promise<void>;
    }
    
  • webpack - 开发服务端webpack配置

  • proxy - 开发服务代理配置

    {
      route: '/api', // 代理API的本地服务的地址
      config: {
        target: 'http://www.api.com/api', // 代理API的实际地址
        changeOrigin: true // 是否改变host
      }
    }
    

    or

    (params: {
      ip: string;
      port: number;
      host?: string;
      logLevel: LOGLEVEL;
      middlewareConfig?: (MiddlewareItem | MiddlewareFn)[];
    }) => {
      route: string;
      config: Config;
    }
    

    更多配置详见 http-proxy-middleware

  • port - 开发服务启动的端口号

  • host - 开发服务启动的host

  • https - 开发服务以https协议启动,可自定义 keycert

  • serverType - 开发服务的类型

  • logLevel - 开发服务日志输出等级,可选 'debug'、'info'、'warn'、'error'、'silent'

build 构建配置

  • autoRelease - 构建完成后是否自动发布

  • srcDir - 构建资源输入路径

  • outDir - 构建结果输出路径

  • esmDir - 构建结果输出路径(符合es6 module规范)

  • hash - 构建的资源是否加上hash,可选 'contenthash'、'chunkhash'、'hash'(传入true则是contenthash)

  • configuration - 构建阶段的自定义配置回调,返回自定义的配置

  • reserve - 配置未经过打包,但需要保留进构建结果的资源

    • style - 构建结果是否保留样式文件

    • assets - 构建结果保留其他资源的路径

  • preflight - 构建前的飞行检查

    • typescript - 是否处理ts或tsx文件

    • test - 是否进行单元测试

    • eslint - 是否进行eslint检测

    • prettier - 是否进行prettier检测

    • stylelint - 是否进行stylelint检测

release

  • autoBuild - 发布之前是否自动构建项目

  • autoTag - 发布到npm仓库时会自动根据当前版本号设定tag

  • git - 发布的git仓库地址

  • npm - 发布的npm仓库地址

  • preflight - 发布前的飞行检查

    • test - 发布前是否进行单元测试

    • eslint - 发布前是否进行eslint检测

    • prettier - 发布前是否进行prettier检测

    • stylelint - 发布前是否进行stylelint检测

    • commitlint - 发布前是否进行commitlint检测

    • branch - 发布前进行分支检测,设置为空字符串则不会检测

template 新建模板配置

  • root - 生成模板的根路径

  • typescript - 是否创建ts文件

  • test - 是否创建单元测试文件

  • stylesheet - 样式文件类型

  • readme - [true, 'mdx'] ([是否生成ReadMe文件, 创建md 或 mdx文件])

plugins

插件集合,插件需满足下面的类型:

type OmniPlugin = {
  name: string;
  stage: PluginStage;
  handler: PluginHandler;
};

type PluginStage = 'new' | 'build' | 'release';
interface PluginHandler {
  (config: Omit<OmniConfig, 'plugins'>): Promise<any>;
}