bio: 一站式前端开发工具

ChinaGuanq 2019-06-26

本文发表在 微店前端团队 blog

bio 是什么

注意:bio 目前只兼容 Mac 平台

github 地址:bio-cli

npm 地址:bio-cli

前端开发一站式解决方案。

使用 bio,您将只需关注业务逻辑,无需关注脚手架配置信息,即可快速完成前端开发。

额外的,bio 提供了 eslint、styleint 检测、mock 服务。

bio: 一站式前端开发工具)

安装

快速使用

  • 第 1 步:创建项目目录

    mkdir demo
    
    cd demo
  • 第 2 步:初始化各类项目

    • bio init bio-scaffold-vue: 初始化 vue 项目
    • bio init bio-scaffold-react:初始化 react 项目
    • bio init bio-scaffold-pure: 初始化 非 vue / 非 react 项目
  • 第 3 步:调试

    bio run dev-daily

命令集

  • bio init <脚手架在 npm 源上的名称>

    • 功能

      初始化项目目录。

      该命令会完成以下动作:

      • 在本地安装脚手架,以确保脚手架存在。脚手架安装在 bio 缓存目录(/Users/用户名/.bio/
      • 如果当前目录是空目录(或只有 README.md),该命令会为生成 demo 文件。
      • 执行 npm install
    • 脚手架

      bio 目前内置了三个脚手架(bio-scaffold-vuebio-scaffold-reactbio-scaffold-pure

      bio 使用 npm 托管脚手架,默认托管在 npm 官方源,您可自行设置托管源,代码地址

    • 脚手架昵称

      bio 为内置的三个脚手架都取了昵称:

      bio-scaffold-vue --> vue
      bio-scaffold-react --> react
      bio-scaffold-pure --> pure

      所以所有涉及脚手架名称的命令,均可以用昵称代替。

      您也可以自行添加昵称,代码地址

  • bio run <脚手架支持的任务> [-n, --no-watch]

    • 功能

      启动脚手架任务。

      bio 会启动脚手架,并透传任务名称到脚手架,以完成各类任务。

      所以,任务名称是可变的,只要脚手架支持就可以。

      我们默认提供的三个脚手架都提供了以下 6 种任务:

      dev-daily
      dev-pre
      dev-prod
      build-daily
      build-pre
      build-prod

      详细信息可查看:bio 内置脚手架任务名称。

      举例:初始化完 bio-scaffold-vue 项目后,启动它的 dev-daily 任务,命令即为:

      bio run dev-daily
    • 选项 -n, --no-watch 介绍:

      bio 默认会 启动 一个文件监听服务,同步当前目录文件到脚手架目录,保证脚手架目录与业务目录始终是父子关系,供脚手架编译。(资料:(为什么要保证父子关系?))

      -n, --no-watch关闭同步当前目录到脚手架目录的文件监听服务。

      举例:

      bio run dev-daily -n
  • bio scaffold show <脚手架在 npm 源上的名称>

    打开脚手架所在的本地目录。

  • bio scaffold create

    创建脚手架,会提示你新的脚手架名称

  • bio mock [端口]

    启动本地 mock 服务,默认端口是 7000

    如果希望指定端口号,可以直接指定,如:bio mock 8000

  • bio lint init [-t, --type [value]]

    • 功能

      初始化 lint,会自动在 git commit 前挂载 lint 执行钩子

    • 选项 [-t, --type [value]] 介绍

      默认初始化 es6 规则,如果希望在某个目录初始化 es5 功能,可以进入该目录,执行:

      bio lint init -t es5

      目前支持两种类型:es5、es6

  • bio lint [--fix] [-w, --watch]

    执行 lint 检查,bio 会为你生成 lint 结果页面进行查看

    • --fix:自动修正源码中的代码格式。
    • -w, --watch:启动文件监听,文件一旦有变化,会触发 lint 检查
  • bio help

    help 信息

bio 的特点

bio: 一站式前端开发工具

bio: 一站式前端开发工具

链接

  • 目前可用的脚手架
  • 开发 bio 脚手架

TODO

  • 完善单元测试
  • 持续集成
  • English Docs
  • 完善脚手架项目 demo

开发者

LICENSE

MIT

相关推荐