Bigfish 企業級前端開發框架，與常見的前端框架和工具不同，它從工程角度集成了各類功能，從初始化開發到最終上線整套技術方案，解決了前端開發經常遇到的前端技術棧整合配置麻煩、開發聯調麻煩、前端資源發布上線麻煩三大痛點。
Bigfish主要具備以下功能：
基於 umi 整合了前端工具鏈：整合了 Ant Design、Dva、Ant Design Pro 技術棧，最小化成本開發
簡化開發聯調：提供前端 http 接口的代理，在開發過程中隨時切換 mock 和聯調接口，方便自測和聯調
一站式發布部署：從工程初始化，到研發迭代管理，到一鍵發布靜態資源及頁面渲染
安裝
想要使用bigfish，首先需要安裝版本正確的NodeJS和tnpm，然后到我們要創建bigfish的目錄執行：
tnpm install
通過這樣安裝我們就可以使用bigfish的命令來開發和調試了，他的命令都存放在一個package.json文件中
命令
我們使用bigfish從開發到調試基本都是通過命令行來實現的，所以下面介紹一些常用的命令：
tnpm run dev : 啟動本地開發模式並啟動應用，通過這種方式啟動項目在修改文件之后不需要重復啟動，除非你是修改了model，config等配置文件
tnpm run devs : 啟動前后端聯調模式，通過config.js中的配置找到后端的服務器，進行前后端的聯調
tnpm run test : 執行單元測試
tnpx bigfish -v : 查看當前正在執行的bigfish的版本
配置
bigfish中我們通過config/config.js這個文件進行配置，我們在本地的時候可以設置config/config.local.js它會覆蓋上一個文件起到本地調試的配置作用。為了讓下面的介紹更加直觀，我們直接看配置文件的例子，並給出注釋：
import pageRoutes from './router.config';
import defaultSettings from '../src/defaultSettings';
export default {
// 應用類型，有三個可添項：
// console 控制台（中台）應用，從 bigfish 1.0 遷移過來的應用請填寫該項
// h5，移動端 h5 應用
// site，靜態站點類應用
appType: 'console',
// 部署模式，有下面多個可添項：
// bigfishweb，通過 site 對內站點應用（bigfishweb）部署
// assets，適配 Basement 中的 標准前端應用（assets 應用）類型
// sofa，適配 Bigfish 的 SOFA 集成部署模式
// chair，適配 Bigfish 的 Chair 集成部署模式
// offline，離線 h5 應用的部署模式
// online，在線 h5 應用的部署模式
// custom，自定義部署模式，該模式下只會把產物構建到 dist 目錄，后續操作可以自定義
deployMode: 'sofa',
// 你可以通過該配置配合 BIGFISH_ENV 滿足部分一套代碼多處部署的差異性需求
userConfig: {
// ...
}
// 用於配置接口的代理, target 是指后台服務地址
proxy: {
"dev": {
"api/": {
"target": "http://xxx.alipay.net",
"headers": {
"Host": "xxx.alipay.net",
}
}
},
"test": {
"api/": {
"target": "http://xxx.alipay.net"
}
},
"pre": {
"api/": {
"target": "ningzhen"
}
}
},
// 路由配置
// 路由配置參考如下示例，基於 react-router 實現，支持路由嵌套
// 這個 exports.router 是一個 json，component 對應的字符串是 src/page/\* 的文件夾名稱
routes: {
path: '/',
component: 'LayoutPage',
indexRoute: { component: 'IndexPage' },
childRoutes: [
{ path: '/userlist', component: 'UserListPage' },
{ path: '/user/:id', component: 'UserPage' },
{ path: '/user2/:id', redirect: '/user/:id' },
],
},
// 主題
theme: {
'primary-color': defaultSettings.primaryColor,
},
// 國際化配置
locale: {
enable: true,
},
// 設置 html 的 favicon url 地址
favicon: 'https://xxx.alipayobjects.com/zos/rmsportal/uLsFenYjfFtKMzBaUpeS.png',
// 默認是 false，設置為 true 之后發出的請求都會默認帶上 ctoken。
// 注意前提是你必須使用 bigfish 內置的網絡請求的方案 @alipay/bigfish/sdk/fetch 或者 @alipay/bigfish/sdk/request。
ctoken: true,
// 通過 script 和 externals 配置提高構建速度和減小構建產物的體積
// 如果你沒有用到圖表中的 data-set 可以去掉下面相關代碼
// 原 assets 應用因為沒有引入 bigfish 的 html，所以需要手動添加 script 到 vm 中
//（推薦升級 assets 到新版直接引入 bigfish 的方案解決）
script: ['https://xxx.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js'],
externals: {
'@antv/data-set': 'DataSet',
},
// 在有的瀏覽器中因為瀏覽器的原因有些 JS 的特性可能沒有
// 比如 IE 不支持 Promise，這樣可能會導致項目運行時出錯
// 但是你的項目有兼容性的需求需要支持該部分瀏覽器
// 那么你可以通過配置 targets 來添加相關的 polyfills 用以支持更多瀏覽器
// 下文表示額外支持ie11
targets: {
ie: 11,
}
};
路由
路由是一個數組，數組中每一個對象是一個路由信息，路由會從前到后匹配
可以在路由中使用屬性：routes，繼續用嵌套的方式匹配其他的路由
使用屬性indexRoute，將當前的路徑默認設置為展示某個component。或者在屬性indexRoute中可以使用redirect重定向屬性，指向某一個路徑
使用history.push的方法在組件中跳轉到指定路由
組件中可以通過props的屬性params和location獲取路由相關的參數
可以通過Link標簽在html中進行頁面跳轉，外部鏈接使用a標簽
history.push('/your/url/path'); // 跳轉到指定路由‘
// 帶參數跳轉到指定路由
history.push('/list?a=b');
history.push({
pathname: '/list',
query: {
a: 'b',
},
});
history.goBack(); // 跳轉到上一個路由
=====================================================
/path/:id /path/123?type=test
this.props.params
{
id: '123'
}
this.props.location
{
pathname: '/path/123',
search: '?type=test'
}
=====================================================
import { Link } from '@alipay/bigfish/sdk/router';
<Link to="/your/path">link name</Link>
轉載：https://blog.csdn.net/QuinnNorris/article/details/84852231