Command SPA scaffolding with dynamic loading and socket observable
fast & light React SPA mobile tooling.
npm i prince-cli -g
install prince-cli for globalprince new myApp
create new react SPA app from local templateprince dev local
start local modeprince build
create release bundleprince add xxx
create a new page(xxx is your page name)npm test
run unit testing├── mock
│ ├── mock.api.js // http mock
│ ├── socket.api.js // websocket mock
│ └── data
│ ├── mockData.js // rest mock data
│ └── socketData.js // websocket mock data
├── src
│ ├── common // common function
│ │ ├── action // actions
│ │ ├── assests // static files
│ │ ├── component // components
│ │ ├── less // styles
│ │ ├── reducers // stores
│ │ └── service // methods
│ ├── page
│ │ ├── firstPage // page 1
│ │ │ ├── action // actions
│ │ │ ├── assests // static files
│ │ │ ├── component // components
│ │ │ ├── less // styles
│ │ │ ├── reducers // stores
│ │ │ ├── service // methods
│ │ │ ├── firstPage.test.js // unit test
│ │ │ └── index.js // page entry
│ │ ├── secondPage // page 2
│ │ └── thirdPage // page 3
│ └── route
│ ├── router.js // router core
│ └── config.js // router config
├── entry.js // main entry
├── package.json // npm config
├── .eslintrc // Eslint config
└── temp.html // template
in the path of pages useprince add xxx
to create new page template
add page routers at route/config.js (you can change the port anyway):exemple
static files server:http://localhost:4396
(static files and hot reload)
http requests server:http://localhost:4397
(return ajax and jsonp mock request)
webSocket server:ws://localhost:4398
(send and push socket mock message)
http requests
import { commonService } from '@common/service';
/**
* @description GET,POST,JSONP request
* @param {string} url request url
* @param {obj} data request data
* @param {obj} options(optional)
*/
commonService.get('/mockGetRest', null, { mock: true }).then(res => {
console.log('GET response:', res);
});
commonService.post('/mockPostRest', { a: 1 }).then(res => {
console.log('POST response:', res);
});
commonService.jsonp('/mockJsonpRest', { a: 2 }).then(res => {
console.log('JSONP response:', res);
});
you can inject{ mock, headers }
at the third parameter to get mock server return during debug mode, headers
config will add custom request headers, if you request url start with http
or https
, it will use absolute path, otherwise will use relative path.
import { commonService } from '@common/service';
/**
* @description subscribe socket message
* @param {string} sign name
* @param {obj} data callback data
*/
commonService.ws.subscribe('lzw', data => {
//...
});
commonService.ws.send({ a: 3 });
first param of subscribe method define the sign which is confirmed by server side document,common Service create event subscribe for each sign,when the messages are sended to client, it will just trgger the callback that bind the same sign.
http mock:
const mockData = require('./data/mockData');
const mockApi = new Map();
/**
* @description rest api mock
* @example mockApi.set([method, url, timeout], response);
* @param {string} method api type, support'GET','POST','JSONP'
* @param {string} url api url path
* @param {number} timeout request return delay (optional)
* @param {object} response request return data
*/
mockApi.set(['GET', '/mockGetRest', 2000], mockData.mockGetRest);
mockApi.set(['POST', '/mockPostRest', 200], mockData.mockPostRest);
mockApi.set(['JSONP', '/mockJsonpRest'], mockData.mockJsonpRest);
module.exports = mockApi;
webScoket mock:
const socketData = require('./data/socketData');
const socketApi = new Map();
/**
* @description webSocket msg mock
* @example mockApi.set([type, time], response);
* @param {string} type push message times,'timeout' for once,'interval' for interval
* @param {number} time interval time
* @param {object} response socket push data
*/
socketApi.set(['timeout', 2500], socketData.wzl);
socketApi.set(['interval', 1000 * 20], socketData.lzw);
module.exports = socketApi;
import { commonService } from '@common/service';
commonService.pageJump('push', {
pathname: '/thirdPage'
});
commonService.pageBack('go', -1);
add turning animation liked native is based on react-router, pageJump
is animate to next page, pageBack
is animate previous page, first param of this method is react-router history proto method, and the second param is history method options.
@common/
in the code.debug
mode require that you shuold build server side bufore using it, then edit file script/config.js andbuild
program. At last commit dist folder to server side.