bio: 一站式前端開發工具

本文發表在 微店前端團隊 blog

bio 是什麼

注意：bio 目前只相容 Mac 平臺

github 地址：bio-cli

npm 地址：bio-cli

前端開發一站式解決方案。

使用 bio，您將只需關注業務邏輯，無需關注腳手架配置資訊，即可快速完成前端開發。

額外的，bio 提供了 eslint、styleint 檢測、mock 服務。

)

安裝

• 安裝 Node.js（>= 8.9.1）

  https://nodejs.org/en/download/

• 安裝 bio

  npm install bio-cli -g
  複製程式碼

快速使用

• 第 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-vue、bio-scaffold-react、bio-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

  • 功能

    初始化 lint，會自動在 git commit 前掛載 lint 執行鉤子

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

  執行 lint 檢查，bio 會為你生成 lint 結果頁面進行檢視

  • --fix：自動修正原始碼中的程式碼格式。
  • -w, --watch：啟動檔案監聽，檔案一旦有變化，會觸發 lint 檢查

• bio help

  help 資訊

bio 的特點

連結

• 目前可用的腳手架
• 開發 bio 腳手架

TODO

• 完善單元測試
• 持續整合
• English Docs
• 完善腳手架專案 demo

開發者

• Core：劉遠洋 @微店
• Lint：丁俊傑 @微店

LICENSE

MIT