Skip to content
🚀 a front-end integrated development and debugging tools -一款前端集成开发和调试工具
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
src remove:pack Jan 28, 2018
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md update:api Dec 29, 2018
README_zh-CN.md update:调整插件代码逻辑 Dec 29, 2018
package.json publish:2.3.13 Sep 17, 2019

README.md

前端集成开发工具 - uba

npm version Build Status devDependency Status NPM downloads

介绍

uba采用微内核、多插件开发,它基于 webpack 封装的 cli 命令行工具,为了解决目前前端快速开发不足而打造,提供一站式项目脚手架、最佳实践初始化、本地服务调试、数据模拟、远程代理、资源编译、静态产出、性能优化等功能。 uba是一个前端开发工具,可以提供多种开发场景。 核心开发人员会在远端最佳实践仓库 uba-templates 进行更新和维护,当然也可以根据所需的样式和功能提供不同的模板。可以给使用开发者提供轻量、简单、便捷的开发体验,让开发者从复杂的配置中脱离出来,这些复杂而又不易初学者学习的内容,就交给我uba来解决吧!

安装

uba有两种使用方式:全局安装方式,用于拉取远端脚手架。另一种是脚手架内依赖开发包的形式使用

安装 node.js 开发环境.(node > 8.x && npm > 3.x)

网络不好的可以使用淘宝的CNPM镜像源

进行工具命令的安装,需要安装到全局环境上使用,后面项目开发中,uba是可以依赖包形式NodeAPI开发使用。

$ npm install uba@2 -g      #全局安装使用,也可以在项目packages.json依赖使用

安装结束后,输入下面命令来确定是否安装成功:

$ uba -v      #查看版本
2.x.x

使用

  1. 如何使用前端集成工具uba来快速初始化一个前端工程:
$ uba init
  1. 使用上下箭头按键来选择你要的前端工程
Available official templates:
? Please select : (Use arrow keys)
❯ template-iuap-react-solution - Iuap React整体解决方案脚手架
  template-moli - template-moli
  template-nc-multiple-pages - NC定制化需求多页面脚手架
  template-react-multiple-pages - React多页应用脚手架
  template-react-single-pages - 一款带组件库、状态管理并包含示例、参照的开发框架
  template-tinper-bee-admin - 采用tinper-bee组件库所构建的管理系统
  1. 输入你的工程项目名称,默认不输入的名字为uba-boilerplate
? boilerplate name : uba-boilerplate
Downloading template-react-single-pages please wait.
Boilerplate uba-boilerplate done.
? Automatically install NPM dependent packages? Yes
Install NPM dependent packages,please wait.

下载完远端的脚手架或最佳实践后,uba会提示是否全自动安装依赖包,我们选择默认Y来继续。

如果不选择的话后面也可以手动使用npm installcnpm install去安装使用。

  1. 进入安装好的工程根目录下,并执行启动服务命令:
$ cd uba-boilerplate && npm run dev

稍等uba就会自动打开你的默认浏览器显示页面的。并会打印一些工具日志,比如 数据模拟 代理访问等。

[HPM] Proxy created: /  ->  http://cnodejs.org
[HPM] Proxy rewrite rule created: "^/mes" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'proxyRes', 'error', 'close' ]
[proxy] : /api/ to http://cnodejs.org
[HPM] Proxy created: /  ->  https://api.github.com
[HPM] Subscribed to http-proxy events:  [ 'proxyRes', 'error', 'close' ]
[proxy] : /users/,/orgs/ to https://api.github.com
[mock]:[/local/user/get] to ./mock/user/get.json
[mock]:[/local/user/post] to ./mock/user/post.json
********************************************
 ❤️  uba-develop-server
 [core] : v1.2.0
 [http] : http://127.0.0.1:3000
 [http] : http://10.6.245.141:3000
********************************************

image

  1. 构建静态资源,执行下面命令即可:
$ npm run build

稍等片刻后,就会在项目目录内产出dist文件夹,里面就是我们需要的构建完的资源,是不是很简单:) image

以上就是基本使用的说明。

参数

下面是在配置script命令传入的参数如下:

  "scripts": {
    "dev": "uba server --port 4000 --noInfo --logLevel debug --chunks --noOpen --homepage=wbalone/pages/login/login.html"
  }
名称 说明
noProcess 不显示构建进度
logLevel 日志级别,默认:info 其他为:trace,debug,info,warn,error,silent
chunks 不显示详细的chunks信息
port 服务器端口设置,默认:3000,如冲突会随机没有使用的端口
noOpen 不自动打开浏览器
homepage 默认打开的页面相对路径

说明

  • uba@2版本是基于webpack2稳定版本封装,使用的插件和加载器都是最稳定的

  • 一般开发不需要每个人都安装全局uba去初始化使用,团队内的核心开发人员初始化构建好项目后,参与开发者只需要安装npm install后,通过npm run dev开启调试服务、npm run build来构建项目即可。

配置

uba.config.js (包含:代理、静态托管、webpack配置等)

  1. 代理设置
//远程代理访问,可以配置多个代理服务
//更多配置参考 https://www.npmjs.com/package/http-proxy-middleware#options
const proxyConfig = [{
  enable: true,                 //启动开关
  router: "/api/",              //代理路由
  headers: { "X-XSS": "X-XSS" },//设置响应请求头
  pathRewrite: { '^/mes': '' }, //URL指定重写
  url: "http://cnodejs.org"     //代理地址
}, {
  enable: true,
  router: ["/users/", "/orgs/"],//指定多个路由代理
  url: "https://api.github.com"
}];

上面是项目里默认的一些设置,一般来说这个配置足够使用了,无非是我们按照后端给的接口去登录拿到Cookies,然后授权请求代理数据接口。我们需要代理到指定的路由就要去设置指定的路由地址即可

  1. historyApiFallback 设置

需要使用该功能,直接设置为true就好

const svrConfig = {
    historyApiFallback: true
}
  1. 静态资源托管

顾名思义,uba开启一个静态的http服务来把我们工程下的指定资源提供http访问

const staticConfig = {
  folder: 'src/static'
}

设置该项后,重启服务我们可以通过http://127.0.0.1;3000/${src/static目录内的资源访问}

  1. webpack2 配置

其他的配置就是我们普通的webpack配置,包含入口、出口、加载器、插件等。

可以根据官网的配置去个性化我们的工程配置,也可以使用uba默认集成好的无需设置。

配置参考:https://webpack.docschina.org/concepts/

  1. Mock 配置

uba.mock.js 包含各种HTTP请求方法

如果mockproxy混用,路由完全一致,那么uba的优先级是 webpack assets > mock > proxy

模拟方法体可以是:GET,POST,DELETE,PUT,HEAD,OPTIONS

整体来说就是一个标准的JSON,key代表我们模拟的本地路由地址,value代表我们本地路径的模拟JSON文件

module.exports = {
  "GET": [
    { "/local/user/get": "./mock/user/get.json" }, 
    { "/order/delivery/list": "./mock/order/delivery/list.json" }, 
    { "/order/manage/orderType": "./mock/order/manage/orderType.json" },
    { "/route/data": "./mock/sidebar.json" }
  ],
  "POST": [
    { "/system/role/list": "./mock/sys-manage/role-manage/list.json" }, 
    { "/order/manage/list": "./mock/order/manage/list.json" }, 
    { "/order/delivery/removelist": "./mock/order/delivery/removeList.json" },
    // 销货通知单
    { "/customer_credit/getAssoVo": "./mock/sales/customer-search.json" },
    { "/sales/customer/create": "./mock/sales/customer-create.json" }
  ]
}

说明

  1. 关于启动服务方面的使用请访问:uba-server 插件
  2. 关于构建服务方面的使用请访问:uba-build 插件
You can’t perform that action at this time.