前端脚手架BigFish

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 name