├── bin └── uba.js ├── .travis.yml ├── .gitignore ├── package.json ├── src ├── index.js └── util.js ├── LICENSE ├── CHANGELOG.md ├── README_zh-CN.md └── README.md /bin/uba.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require("../src"); 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - '4' 5 | - '6' 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uba", 3 | "version": "2.3.13", 4 | "preferGlobal": true, 5 | "description": "a front-end develop tool for tinper", 6 | "main": "./bin/uba.js", 7 | "bin": { 8 | "uba": "./bin/uba.js" 9 | }, 10 | "scripts": {}, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/iuap-design/tinper-uba.git" 14 | }, 15 | "keywords": [ 16 | "uba", 17 | "iuap", 18 | "yyuap", 19 | "yonyou" 20 | ], 21 | "author": "Yonyou FED", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/iuap-design/tinper-uba/issues" 25 | }, 26 | "homepage": "https://github.com/iuap-design/tinper-uba#readme", 27 | "dependencies": { 28 | "chalk": "2.4.1", 29 | "minimist": "1.2.0", 30 | "resolve": "1.9.0", 31 | "uba-build": "2.1.1", 32 | "uba-init": "0.0.51", 33 | "uba-server": "2.1.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* uba 2 | * @Author: Kvkens(yueming@yonyou.com) 3 | * @Date: 2017-5-15 00:00:00 4 | * @Last Modified by: Kvkens 5 | * @Last Modified time: 2018-01-27 22:54:24 6 | */ 7 | var os = require("os"); 8 | var fs = require("fs"); 9 | var chalk = require("chalk"); 10 | var argv = require("minimist")(process.argv.slice(2)); 11 | var commands = argv._; 12 | var util = require("./util"); 13 | 14 | //强制第一时间检查node版本，低版本不兼容 15 | util.checkNodeVersion(6); 16 | 17 | //检测输入命令集合参数 18 | if (commands.length === 0) { 19 | //无参数传递 eg. uba 20 | if (argv.version || argv.v) { 21 | util.getVersion(); 22 | } 23 | //显示帮助 24 | util.getHelp(); 25 | } else { 26 | //当有参数传递 eg. uba server 27 | //获得uba运行时的一些参数用于传递给插件使用 28 | let opts = { 29 | cmd: commands, 30 | argv: argv, 31 | name: require("../package.json").name 32 | }; 33 | 34 | //检测调用的插件是否存在？不存在给出警告 35 | let pluginPath = util.findPluginPath(commands[0]); 36 | if (pluginPath) { 37 | if (require(`uba-${commands[0]}`).plugin) { 38 | require(`uba-${commands[0]}`).plugin(opts); 39 | } else { 40 | console.log(chalk.red(" Error : Plugin internal error.")); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016, iuap design 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | /* util 2 | * @Author: Kvkens(yueming@yonyou.com) 3 | * @Date: 2017-5-15 00:00:00 4 | * @Last Modified by: Kvkens 5 | * @Last Modified time: 2018-01-27 23:29:56 6 | */ 7 | 8 | var chalk = require("chalk"); 9 | var resolve = require("resolve"); 10 | var path = require("path"); 11 | 12 | /** 13 | * 获得uba的帮助信息 14 | */ 15 | exports.getHelp = function() { 16 | console.log(); 17 | console.log(chalk.green(" Usage: uba ")); 18 | console.log(); 19 | console.log(chalk.green(" Options:")); 20 | console.log(); 21 | console.log(chalk.green(" -h, --help output usage information")); 22 | console.log(chalk.green(" -v, --version output the version number")); 23 | console.log(); 24 | } 25 | 26 | /** 27 | * 检测node.js的指定运行版本 28 | * @param {*} number 版本号A 29 | */ 30 | exports.checkNodeVersion = function(number) { 31 | var currentNodeVersion = process.versions.node; 32 | if (currentNodeVersion.split(".")[0] < number) { 33 | console.error(chalk.red(`You are running Node ${currentNodeVersion}\nCreate Uba App requires Node 6 or higher. \nPlease update your version of Node.`)); 34 | process.exit(1); 35 | } 36 | } 37 | 38 | /** 39 | * 根据插件名称来获得插件真实路径 40 | * @param {*} command 插件名 41 | */ 42 | exports.findPluginPath = function(command) { 43 | if (command && /^\w+$/.test(command)) { 44 | try { 45 | return resolve.sync("uba-" + command, { 46 | paths: [path.join(__dirname, "..", "node_modules")] 47 | }); 48 | } catch (e) { 49 | console.log(e); 50 | console.log(" " + chalk.green(command) + " command is not installed."); 51 | console.log(" You can try to install it by " + chalk.blue.bold("npm install uba-" + command) + "."); 52 | console.log(""); 53 | } 54 | } 55 | } 56 | 57 | 58 | /** 59 | * 获得uba版本 60 | */ 61 | exports.getVersion = function() { 62 | console.log(chalk.green(require("../package.json").version)); 63 | process.exit(0); 64 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 2.3.13 2 | 3 | 1. 锁定包版本，防止第三方插件出现自动升级导致BUG 4 | 5 | # 2.3.11 6 | 7 | 1. 增加地址重写参数`pathRewrite` 8 | 9 | # 2.3.10 10 | 11 | 1. `uba-build`增加取消查看进度条参数`--noProcess`。 12 | 13 | # 2.3.9 14 | 15 | 1. 增加代理参数headers用于设置Proxy Server请求头参数 16 | 17 | # 2.3.8 18 | 19 | 1. 增加指定mock文件夹去访问静态资源 20 | 21 | # 2.3.7 22 | 23 | 1. 解决之前静态服务`staticConfig`冲突导致的问题现已修复 24 | 25 | # 2.3.6 26 | 27 | 1. 端口冲突检测中间件在个别windows7系统上会出错的问题 28 | 29 | 30 | # 2.3.5 31 | 32 | 1. 集成`open-browser-webpack-plugin`插件，自动判断域名和端口打开。 33 | 2. 解决指定IP和端口设置不灵活导致启动服务绑定IP问题，如：`localhost`、`127.0.0.1`、`10.6.242.173`均可访问。 34 | 3. 优化代码逻辑。 35 | 36 | # 2.2.3 37 | 38 | + 端口冲突的话`uba-server`会自动更换端口。 39 | + 同时支持`mock server`和`proxy server`加载，优先级`Page` > `Mock` > `Proxy`。 40 | + 更新核心中间件版本`webpack-dev-middleware`。 41 | 42 | # 2.2.2 43 | 44 | + 更换`webpack 2.7.0`解决`webpack3`调试服务与构建慢的问题。 45 | 46 | # 2.2.1 47 | 48 | * 修复插件`uba-plugin`释放模板`.gitignore`丢失的问题 49 | 50 | 51 | # 2.2.0 52 | 53 | + 解决`webpack3`调试、构建慢的问题 54 | 55 | # 2.1.0 56 | + 调试`uba`核心采用微内核多插件的方式 57 | + 增加插件机制，可以为`uba`扩展更多的功能了 58 | + 默认自带插件`uba-init`、`uba-install`、`uba-plugin`、`uba-server`、`uba-build` 59 | 60 | 61 | # 2.0.0 62 | 63 | + `uba`架构调整拆分过多依赖模块如：`webpack` 64 | + `uba`初始化最佳实践模式优化，采用人机交互方式选择. 65 | + `uba`核心模块拆分. 66 | + [uba-templates](https://github.com/uba-templates) 新的开发规范. 67 | + `uba`原有命令拆分.剖离出`uba init`,`uba server`,`uba list`直接输入`uba`命令来体验. 68 | 69 | --- 70 | 71 | # 1.4.0 72 | 73 | + uba新的架构调整,本地端->远程端的模式来加载. 74 | + 增加在线最佳实践浏览命令 `uba list`. 75 | + 创建单独[uba-templates](https://github.com/uba-templates)仓库用于存放最佳实践模板. 76 | * 修改初始化命令参数 `uba init iuap name` (iuap最佳实践名称是通过uba list所查询得到). 77 | * 修改uba核心全局命令，整合libs脚本库. 78 | - 去除最佳实践内置采用远端下载方式. 79 | - 去除`uba-init`npm仓库避免开发带来浑浊. 80 | 81 | --- 82 | 83 | # 1.3.0 84 | 85 | + uba架构拆分，全局命令缩减，采用npm来安装核心模块. 86 | + 增加快捷页面创建命令`uba page`. 87 | * 优化最佳实践. 88 | 89 | --- 90 | 91 | # 1.2.0 92 | 93 | + 弃掉1.1版本架构重新开发. 94 | + 完成基本功能增加一系列命令. 95 | + 初始化最佳实践`uba init`. 96 | + 运行测试服务`uba server`,支持端口切换`uba server -p 5000`. 97 | + 构建优化静态资源`uba build`. 98 | + 发布到Maven`uba publish`. 99 | 100 | --- 101 | 102 | # 1.1.0 103 | 104 | + 原始版本分支`old_master`. 105 | -------------------------------------------------------------------------------- /README_zh-CN.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 前端集成开发工具 - uba 4 | 5 | [![npm version](https://img.shields.io/npm/v/uba.svg)](https://www.npmjs.com/package/uba) 6 | [![Build Status](https://img.shields.io/travis/iuap-design/tinper-uba/master.svg)](https://travis-ci.org/iuap-design/tinper-uba) 7 | [![devDependency Status](https://img.shields.io/david/dev/iuap-design/tinper-uba.svg)](https://david-dm.org/iuap-design/tinper-uba#info=devDependencies) 8 | [![NPM downloads](http://img.shields.io/npm/dm/uba.svg?style=flat)](https://npmjs.org/package/uba) 9 | 10 | ## 介绍 11 | 12 | `uba`采用微内核、多插件开发，它基于 `webpack` 封装的 `cli` 命令行工具，为了解决目前前端快速开发不足而打造，提供一站式项目脚手架、最佳实践初始化、本地服务调试、数据模拟、远程代理、资源编译、静态产出、性能优化等功能。 `uba`是一个前端开发工具，可以提供多种开发场景。 核心开发人员会在远端最佳实践仓库 [uba-templates](https://github.com/uba-templates) 进行更新和维护，当然也可以根据所需的样式和功能提供不同的模板。可以给使用开发者提供轻量、简单、便捷的开发体验，让开发者从复杂的配置中脱离出来，这些复杂而又不易初学者学习的内容，就交给我`uba`来解决吧！ 13 | 14 | ## 安装 15 | 16 | > uba有两种使用方式：全局安装方式，用于拉取远端脚手架。另一种是脚手架内依赖开发包的形式使用 17 | 18 | 安装 [node.js](https://nodejs.org) 开发环境.(node > 8.x && npm > 3.x) 19 | 20 | > 网络不好的可以使用淘宝的CNPM镜像源 21 | 22 | 进行工具命令的安装，需要安装到全局环境上使用，后面项目开发中，`uba`是可以依赖包形式`NodeAPI`开发使用。 23 | ```bash 24 | $ npm install uba@2 -g #全局安装使用，也可以在项目packages.json依赖使用 25 | ``` 26 | 安装结束后，输入下面命令来确定是否安装成功： 27 | ```bash 28 | $ uba -v #查看版本 29 | ``` 30 | 31 | ```bash 32 | 2.x.x 33 | ``` 34 | 35 | ## 使用 36 | 37 | 1. 如何使用前端集成工具`uba`来快速初始化一个前端工程： 38 | 39 | ```bash 40 | $ uba init 41 | ``` 42 | 2. 使用上下箭头按键来选择你要的前端工程 43 | 44 | ```bash 45 | Available official templates: 46 | ? Please select : (Use arrow keys) 47 | template-iuap-react-solution - Iuap React整体解决方案脚手架 48 | template-moli - template-moli 49 | template-nc-multiple-pages - NC定制化需求多页面脚手架 50 | template-react-multiple-pages - React多页应用脚手架 51 | ❯ template-react-single-pages - 一款带组件库、状态管理并包含示例、参照的开发框架 52 | template-tinper-bee-admin - 采用tinper-bee组件库所构建的管理系统 53 | ``` 54 | 55 | 56 | 3. 输入你的工程项目名称，默认不输入的名字为`uba-boilerplate` 57 | 58 | ```bash 59 | ? boilerplate name : uba-boilerplate 60 | Downloading template-react-single-pages please wait. 61 | Boilerplate uba-boilerplate done. 62 | ? Automatically install NPM dependent packages? Yes 63 | Install NPM dependent packages,please wait. 64 | ``` 65 | 66 | 下载完远端的脚手架或最佳实践后，`uba`会提示是否全自动安装依赖包，我们选择默认`Y`来继续。 67 | 68 | 如果不选择的话后面也可以手动使用`npm install`或`cnpm install`去安装使用。 69 | 70 | 4. 进入安装好的工程根目录下，并执行启动服务命令： 71 | 72 | ```bash 73 | $ cd uba-boilerplate && npm run dev 74 | ``` 75 | 76 | 稍等`uba`就会自动打开你的默认浏览器显示页面的。并会打印一些工具日志，比如 数据模拟 代理访问等。 77 | 78 | ```bash 79 | [HPM] Proxy created: / -> http://cnodejs.org 80 | [HPM] Proxy rewrite rule created: "^/mes" ~> "" 81 | [HPM] Subscribed to http-proxy events: [ 'proxyRes', 'error', 'close' ] 82 | [proxy] : /api/ to http://cnodejs.org 83 | [HPM] Proxy created: / -> https://api.github.com 84 | [HPM] Subscribed to http-proxy events: [ 'proxyRes', 'error', 'close' ] 85 | [proxy] : /users/,/orgs/ to https://api.github.com 86 | [mock]:[/local/user/get] to ./mock/user/get.json 87 | [mock]:[/local/user/post] to ./mock/user/post.json 88 | ******************************************** 89 | ❤️ uba-develop-server 90 | [core] : v1.2.0 91 | [http] : http://127.0.0.1:3000 92 | [http] : http://10.6.245.141:3000 93 | ******************************************** 94 | ``` 95 | ![image](https://user-images.githubusercontent.com/3817644/44698087-1e5aca80-aab1-11e8-864d-53e4d587caad.png) 96 | 97 | 5. 构建静态资源，执行下面命令即可： 98 | 99 | ```bash 100 | $ npm run build 101 | ``` 102 | 稍等片刻后，就会在项目目录内产出`dist`文件夹，里面就是我们需要的构建完的资源，是不是很简单：） 103 | ![image](https://user-images.githubusercontent.com/3817644/44701090-77c9f600-aabf-11e8-8d7a-98e3edc508e4.png) 104 | 105 | 以上就是基本使用的说明。 106 | 107 | 108 | ## 说明 109 | 110 | - uba@2版本是基于`webpack2`稳定版本封装，使用的插件和加载器都是最稳定的 111 | - 一般开发不需要每个人都安装全局uba去初始化使用，团队内的核心开发人员初始化构建好项目后，参与开发者只需要安装`npm install`后，通过`npm run dev`开启调试服务、`npm run build`来构建项目即可。 112 | 113 | ## 配置 114 | 115 | ### uba.config.js (包含：代理、静态托管、webpack配置等) 116 | 117 | 1. 代理设置 118 | ```js 119 | //远程代理访问，可以配置多个代理服务 120 | //更多配置参考 https://www.npmjs.com/package/http-proxy-middleware#options 121 | const proxyConfig = [{ 122 | enable: true, //启动开关 123 | router: "/api/", //代理路由 124 | headers: { "X-XSS": "X-XSS" },//设置响应请求头 125 | pathRewrite: { '^/mes': '' }, //URL指定重写 126 | url: "http://cnodejs.org" //代理地址 127 | }, { 128 | opts: {//如果设置该参数，代表使用http-proxy-middleware的原始参数，参考http-proxy-middleware的options 129 | target: "http://www.example.org",//指定多个路由代理 130 | changeOrigin: true, 131 | pathRewrite: { 132 | '^/api/old-path': '/api/new-path', // rewrite path 133 | '^/api/remove/path': '/path' // remove base path 134 | }, 135 | router: { 136 | 'dev.localhost:3000': 'http://localhost:8000' 137 | } 138 | }, 139 | enable: true 140 | }]; 141 | ``` 142 | 上面是项目里默认的一些设置，一般来说这个配置足够使用了，无非是我们按照后端给的接口去登录拿到Cookies，然后授权请求代理数据接口。我们需要代理到指定的路由就要去设置指定的路由地址即可 143 | 144 | 145 | 2. historyApiFallback 设置 146 | 147 | 需要使用该功能，直接设置为true就好 148 | ```js 149 | const svrConfig = { 150 | historyApiFallback: true 151 | } 152 | ``` 153 | 154 | 3. 静态资源托管 155 | 156 | 顾名思义，`uba`开启一个静态的`http`服务来把我们工程下的指定资源提供`http`访问 157 | 158 | ```js 159 | const staticConfig = { 160 | folder: 'src/static' 161 | } 162 | ``` 163 | 设置该项后，重启服务我们可以通过`http://127.0.0.1;3000/${src/static目录内的资源访问}` 164 | 165 | 4. webpack2 配置 166 | 167 | 其他的配置就是我们普通的`webpack`配置，包含入口、出口、加载器、插件等。 168 | 169 | 可以根据官网的配置去个性化我们的工程配置，也可以使用uba默认集成好的无需设置。 170 | 171 | 配置参考：https://webpack.docschina.org/concepts/ 172 | 173 | ## 说明 174 | 175 | 1. 关于启动服务方面的使用请访问：[uba-server](https://github.com/tinper-uba/uba-server/blob/webpack2/README.md) 插件 176 | 2. 关于构建服务方面的使用请访问：[uba-build](https://github.com/tinper-uba/uba-build/blob/webpack2/README.md) 插件 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 前端集成开发工具 - uba 4 | 5 | [![npm version](https://img.shields.io/npm/v/uba.svg)](https://www.npmjs.com/package/uba) 6 | [![Build Status](https://img.shields.io/travis/iuap-design/tinper-uba/master.svg)](https://travis-ci.org/iuap-design/tinper-uba) 7 | [![devDependency Status](https://img.shields.io/david/dev/iuap-design/tinper-uba.svg)](https://david-dm.org/iuap-design/tinper-uba#info=devDependencies) 8 | [![NPM downloads](http://img.shields.io/npm/dm/uba.svg?style=flat)](https://npmjs.org/package/uba) 9 | 10 | ## 介绍 11 | 12 | `uba`采用微内核、多插件开发，它基于 `webpack` 封装的 `cli` 命令行工具，为了解决目前前端快速开发不足而打造，提供一站式项目脚手架、最佳实践初始化、本地服务调试、数据模拟、远程代理、资源编译、静态产出、性能优化等功能。 `uba`是一个前端开发工具，可以提供多种开发场景。 核心开发人员会在远端最佳实践仓库 [uba-templates](https://github.com/uba-templates) 进行更新和维护，当然也可以根据所需的样式和功能提供不同的模板。可以给使用开发者提供轻量、简单、便捷的开发体验，让开发者从复杂的配置中脱离出来，这些复杂而又不易初学者学习的内容，就交给我`uba`来解决吧！ 13 | 14 | ## 安装 15 | 16 | > uba有两种使用方式：全局安装方式，用于拉取远端脚手架。另一种是脚手架内依赖开发包的形式使用 17 | 18 | 安装 [node.js](https://nodejs.org) 开发环境.(node > 8.x && npm > 3.x) 19 | 20 | > 网络不好的可以使用淘宝的CNPM镜像源 21 | 22 | 进行工具命令的安装，需要安装到全局环境上使用，后面项目开发中，`uba`是可以依赖包形式`NodeAPI`开发使用。 23 | ```bash 24 | $ npm install uba@2 -g #全局安装使用，也可以在项目packages.json依赖使用 25 | ``` 26 | 安装结束后，输入下面命令来确定是否安装成功： 27 | ```bash 28 | $ uba -v #查看版本 29 | ``` 30 | 31 | ```bash 32 | 2.x.x 33 | ``` 34 | 35 | ## 使用 36 | 37 | 1. 如何使用前端集成工具`uba`来快速初始化一个前端工程： 38 | 39 | ```bash 40 | $ uba init 41 | ``` 42 | 2. 使用上下箭头按键来选择你要的前端工程 43 | 44 | ```bash 45 | Available official templates: 46 | ? Please select : (Use arrow keys) 47 | ❯ template-iuap-react-solution - Iuap React整体解决方案脚手架 48 | template-moli - template-moli 49 | template-nc-multiple-pages - NC定制化需求多页面脚手架 50 | template-react-multiple-pages - React多页应用脚手架 51 | template-react-single-pages - 一款带组件库、状态管理并包含示例、参照的开发框架 52 | template-tinper-bee-admin - 采用tinper-bee组件库所构建的管理系统 53 | ``` 54 | 55 | 56 | 3. 输入你的工程项目名称，默认不输入的名字为`uba-boilerplate` 57 | 58 | ```bash 59 | ? boilerplate name : uba-boilerplate 60 | Downloading template-react-single-pages please wait. 61 | Boilerplate uba-boilerplate done. 62 | ? Automatically install NPM dependent packages? Yes 63 | Install NPM dependent packages,please wait. 64 | ``` 65 | 66 | 下载完远端的脚手架或最佳实践后，`uba`会提示是否全自动安装依赖包，我们选择默认`Y`来继续。 67 | 68 | 如果不选择的话后面也可以手动使用`npm install`或`cnpm install`去安装使用。 69 | 70 | 4. 进入安装好的工程根目录下，并执行启动服务命令： 71 | 72 | ```bash 73 | $ cd uba-boilerplate && npm run dev 74 | ``` 75 | 76 | 稍等`uba`就会自动打开你的默认浏览器显示页面的。并会打印一些工具日志，比如 数据模拟 代理访问等。 77 | 78 | ```bash 79 | [HPM] Proxy created: / -> http://cnodejs.org 80 | [HPM] Proxy rewrite rule created: "^/mes" ~> "" 81 | [HPM] Subscribed to http-proxy events: [ 'proxyRes', 'error', 'close' ] 82 | [proxy] : /api/ to http://cnodejs.org 83 | [HPM] Proxy created: / -> https://api.github.com 84 | [HPM] Subscribed to http-proxy events: [ 'proxyRes', 'error', 'close' ] 85 | [proxy] : /users/,/orgs/ to https://api.github.com 86 | [mock]:[/local/user/get] to ./mock/user/get.json 87 | [mock]:[/local/user/post] to ./mock/user/post.json 88 | ******************************************** 89 | ❤️ uba-develop-server 90 | [core] : v1.2.0 91 | [http] : http://127.0.0.1:3000 92 | [http] : http://10.6.245.141:3000 93 | ******************************************** 94 | ``` 95 | ![image](https://user-images.githubusercontent.com/3817644/44698087-1e5aca80-aab1-11e8-864d-53e4d587caad.png) 96 | 97 | 5. 构建静态资源，执行下面命令即可： 98 | 99 | ```bash 100 | $ npm run build 101 | ``` 102 | 稍等片刻后，就会在项目目录内产出`dist`文件夹，里面就是我们需要的构建完的资源，是不是很简单：） 103 | ![image](https://user-images.githubusercontent.com/3817644/44701090-77c9f600-aabf-11e8-8d7a-98e3edc508e4.png) 104 | 105 | 以上就是基本使用的说明。 106 | 107 | 108 | ## 参数 109 | 110 | 下面是在配置script命令传入的参数如下： 111 | 112 | ```bash 113 | "scripts": { 114 | "dev": "uba server --port 4000 --noInfo --logLevel debug --chunks --noOpen --homepage=wbalone/pages/login/login.html" 115 | } 116 | ``` 117 | 118 | 119 | 名称 | 说明 120 | ---|--- 121 | noProcess | 不显示构建进度 122 | logLevel | 日志级别，默认：info 其他为：trace,debug,info,warn,error,silent 123 | chunks | 不显示详细的chunks信息 124 | port | 服务器端口设置，默认：3000，如冲突会随机没有使用的端口 125 | noOpen | 不自动打开浏览器 126 | homepage | 默认打开的页面相对路径 127 | 128 | ## 说明 129 | 130 | - uba@2版本是基于`webpack2`稳定版本封装，使用的插件和加载器都是最稳定的 131 | 132 | - 一般开发不需要每个人都安装全局uba去初始化使用，团队内的核心开发人员初始化构建好项目后，参与开发者只需要安装`npm install`后，通过`npm run dev`开启调试服务、`npm run build`来构建项目即可。 133 | 134 | ## 配置 135 | 136 | ### uba.config.js (包含：代理、静态托管、webpack配置等) 137 | 138 | 1. 代理设置 139 | ```js 140 | //远程代理访问，可以配置多个代理服务 141 | //更多配置参考 https://www.npmjs.com/package/http-proxy-middleware#options 142 | const proxyConfig = [{ 143 | enable: true, //启动开关 144 | router: "/api/", //代理路由 145 | headers: { "X-XSS": "X-XSS" },//设置响应请求头 146 | pathRewrite: { '^/mes': '' }, //URL指定重写 147 | url: "http://cnodejs.org" //代理地址 148 | }, { 149 | enable: true, 150 | router: ["/users/", "/orgs/"],//指定多个路由代理 151 | url: "https://api.github.com" 152 | }]; 153 | ``` 154 | 上面是项目里默认的一些设置，一般来说这个配置足够使用了，无非是我们按照后端给的接口去登录拿到Cookies，然后授权请求代理数据接口。我们需要代理到指定的路由就要去设置指定的路由地址即可 155 | 156 | 157 | 2. historyApiFallback 设置 158 | 159 | 需要使用该功能，直接设置为true就好 160 | ```js 161 | const svrConfig = { 162 | historyApiFallback: true 163 | } 164 | ``` 165 | 166 | 3. 静态资源托管 167 | 168 | 顾名思义，`uba`开启一个静态的`http`服务来把我们工程下的指定资源提供`http`访问 169 | 170 | ```js 171 | const staticConfig = { 172 | folder: 'src/static' 173 | } 174 | ``` 175 | 设置该项后，重启服务我们可以通过`http://127.0.0.1;3000/${src/static目录内的资源访问}` 176 | 177 | 4. webpack2 配置 178 | 179 | 其他的配置就是我们普通的`webpack`配置，包含入口、出口、加载器、插件等。 180 | 181 | 可以根据官网的配置去个性化我们的工程配置，也可以使用uba默认集成好的无需设置。 182 | 183 | 配置参考：https://webpack.docschina.org/concepts/ 184 | 185 | 5. Mock 配置 186 | 187 | ### uba.mock.js 包含各种HTTP请求方法 188 | 189 | > 如果`mock`和`proxy`混用，路由完全一致，那么`uba`的优先级是 webpack assets > mock > proxy 190 | 191 | 模拟方法体可以是:`GET`,`POST`,`DELETE`,`PUT`,`HEAD`,`OPTIONS`等 192 | 193 | 整体来说就是一个标准的`JSON`,`key`代表我们模拟的本地路由地址，`value`代表我们本地路径的模拟JSON文件 194 | 195 | ```js 196 | module.exports = { 197 | "GET": [ 198 | { "/local/user/get": "./mock/user/get.json" }, 199 | { "/order/delivery/list": "./mock/order/delivery/list.json" }, 200 | { "/order/manage/orderType": "./mock/order/manage/orderType.json" }, 201 | { "/route/data": "./mock/sidebar.json" } 202 | ], 203 | "POST": [ 204 | { "/system/role/list": "./mock/sys-manage/role-manage/list.json" }, 205 | { "/order/manage/list": "./mock/order/manage/list.json" }, 206 | { "/order/delivery/removelist": "./mock/order/delivery/removeList.json" }, 207 | // 销货通知单 208 | { "/customer_credit/getAssoVo": "./mock/sales/customer-search.json" }, 209 | { "/sales/customer/create": "./mock/sales/customer-create.json" } 210 | ] 211 | } 212 | ``` 213 | 214 | ## 说明 215 | 216 | 1. 关于启动服务方面的使用请访问：[uba-server](https://github.com/tinper-uba/uba-server/blob/webpack2/README.md) 插件 217 | 2. 关于构建服务方面的使用请访问：[uba-build](https://github.com/tinper-uba/uba-build/blob/webpack2/README.md) 插件 --------------------------------------------------------------------------------