前端脚手架BigFish

一时失言乱红尘 2022-01-06 02:01 596阅读 0赞

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