bio: 一站式前端開發工具

時間 2019-11-07

標籤 bio 前端開發工具简体版

原文原文鏈接

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

bio 是什麼

注意：bio 目前只兼容 Mac 平臺vue

github 地址：bio-clinode

npm 地址：bio-clireact

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

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

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

)

安裝

安裝 Node.js（>= 8.9.1）web

https://nodejs.org/en/download/npm
安裝 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 信息