同步操作将从 open-hand/choerodon-front-boot 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Choerodon front boot is a toolkit about front end package management, startup, compilation. It is mainly used to provide custom some configurations file to create a project of React that can be modified to some extent.
The construction project can be used on macOS
, Windows
or Linux
. Teams can be developed in modules, greatly speeding up development.
webpack
for construction.React
and Mobx
are used as the main development technology.$ npm install choerodon-front-boot -S
config.js
import autoprefixer from 'autoprefixer';
// default config of Choerodon
const config = {
port: 9090,
output: './dist',
htmlTemplate: 'index.template.html',
devServerConfig: {},
postcssConfig: {
plugins: [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
],
},
babelConfig(config, mode, env) {
return config;
},
webpackConfig(config, mode, env) {
return config;
},
enterPoints(mode, env) {
// By default, it returns empty object.
// In javascript files, words `process.env.XXX` will be replaced with the key of returned map object like `XXX` from this function .
// e.g.
// development env
if (mode === 'start' || env === 'development') {
return {
// The `server` property of root config will be overwritten by this.
API_HOST: 'http://api.example.org',
}
}
// production env
if (mode === 'build' || env === 'production') {
return {
// Reference to `enterpoint.sh`
API_HOST: 'an `enterpoint` placeholder string',
}
}
},
entryName: 'index',
root: '/',
// By default, The property `routes` is null and we use property `main` as path of router component
// and use the last word of property `name` what be split by char `-` as router path in package.json
routes: {
'iam': 'src/app/iam/containers/IAMIndex.js',
},
// By default, dashboard is false.
// The keys of dashboard are namespaces, and the entries of which are component paths.
dashboard: {
// For e.g., use glob pattern
iam: 'src/dashboard/*',
devops: [
// For e.g., use dir path
// For e.g., use file path
'src/dashboard/Test',
'src/dashboard/Test2.js',
],
// Intl example
agile: {
components: 'src/dashboard/*',
locale: 'src/locale/*',
}
},
// API server
server: 'http://api.example.com',
// File server
fileServer: 'http://file.example.com',
// WebSocket server
webSocketServer: 'ws://ws.example.com',
clientid: 'localhost',
// HTML title
titlename: 'Choerodon',
// Page favicon
favicon: 'favicon.ico',
// modify variables for less and sass
theme: {
'primary-color': '#3F51B5',
},
}
$ choerodon-front-boot start --config config.js
Once running, open http://localhost:9090
$ choerodon-front-boot build --config config.js
First, you should make sure that you have Menu.yml
under ./{1}/src/app/{1}/config/Menu.yml
.
And also should have language/en.yml & language/zh.yml
。
A Menu.yml
file like this:
#Menu.yml
"iam": code
icon: IAM # icon ode
sort: 1 # sort
delete: "true" # Whether it should be deleted
site: # menu level
- "organization": # code
sort: 1 # sort
Routes: /iam/organization # route
icon: manage_organization # icon
permission: # permissions
- 'iam-service.organization.enableOrganization'
A language/en.yml
file like this:
#language/en.yml
"iam": "platform settings"
# site
"iam.organization": "Organization"
Then, you can run the script to initialize the menu.
$python ./{1}/node_modules/choerodon-front-boot/structure/configAuto.py {1}
$python ./{1}/node_modules/choerodon-front-boot/structure/sql.py [-i HOST] [-p PORT] [-u USER] [-s PASSWD] [-a ATTRS] [-d DELETE]
{1}
is your module name.
First, you should make sure that you have dashboard.yml
under ./{1}/src/app/{1}/config/dashboard/dashboard.yml
.
And also should have language/en.yml & language/zh.yml
。
A dashboard.yml
file like this:
#dashboard.yml
dashboard:
- code: "Guide"
icon: APItest
title: "快速入门"
description: "新手指引"
level: site
sort: 1
- code: "Document"
icon: description
title: "文档"
description: "文档"
level: site
sort: 2
A language/en.yml
file like this:
#language/en.yml
"Guide": "Guide"
"Document": "Document"
Then, you can run the script to initialize the dashboard.
$python ./{1}/node_modules/choerodon-front-boot/structure/dashboard.py -o yml -m {1}
$python ./{1}/node_modules/choerodon-front-boot/structure/dashboard.py -o sql [-i HOST] [-p PORT] [-u USER] [-s PASSWD]
{1}
is your module name.
In the dashboard card component, we can use the DashboardToolBar
and DashboardNavBar
component.
import React from 'react';
import { Link } from 'react-router-dom';
import { DashboardToolBar, DashboardNavBar } from 'choerodon-front-boot';
class Example extends React.Component {
render() {
return (
<div>
<DashboardToolBar>
<button/>
</DashboardToolBar>
<div>
content
</div>
<DashboardNavBar>
<Link>go to home</Link>
</DashboardNavBar>
</div>
);
}
}
WSHandler
componnet is used for websocket to handle message.
import React from 'react';
import { WSHandler } from 'choerodon-front-boot';
class Example1 extends React.Component {
handleMessage = (data) => {
};
render() {
<WSHandler
path="choerodon:msg"
key="..."
onMessage={this.handleMessage}
>
{
data => (
<span>{data}</span>
)
}
</WSHandler>
}
}
webSocketServer
in config.js.path
is choerodon:msg
.
It will open a websocket connection as ws://ws.example.com/choerodon:msg
.
Each handler use the same path will open only one websocket connection.key
for subscript message.onMessage
is used to handle message from server.If you find any shortcomings or bugs, please describe them in the issue.
Pull requests are welcome! Follow to know for more information on how to contribute.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。