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