dengtongyu/wdp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化工作流

Browse Source
This commit is contained in:
dengtongyu committed 2018-11-15 16:59:28 +08:00
1 parent b7c0e5e2ac
commit 3c07f2fd30
15 files changed
+441 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package-lock.json
Generated
+80
View File
@@ -1186,6 +1186,12 @@
"integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
"dev": true
},
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
"ansi-colors": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.1.tgz",
@@ -2258,6 +2264,12 @@
"source-list-map": "^2.0.0"
}
},
"css-parse": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
"integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=",
"dev": true
},
"css-select": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -4772,6 +4784,12 @@
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
"dev": true
},
"lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
"dev": true
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6164,6 +6182,12 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"sax": {
"version": "0.5.8",
"resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
"integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
"dev": true
},
"schedule": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
@@ -6714,6 +6738,56 @@
}
}
},
"stylus": {
"version": "0.54.5",
"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
"integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
"dev": true,
"requires": {
"css-parse": "1.7.x",
"debug": "*",
"glob": "7.0.x",
"mkdirp": "0.5.x",
"sax": "0.5.x",
"source-map": "0.1.x"
},
"dependencies": {
"glob": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
"integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.2",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"source-map": {
"version": "0.1.43",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
"integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
"dev": true,
"requires": {
"amdefine": ">=0.0.4"
}
}
}
},
"stylus-loader": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
"integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
"dev": true,
"requires": {
"loader-utils": "^1.0.2",
"lodash.clonedeep": "^4.5.0",
"when": "~3.6.x"
}
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7400,6 +7474,12 @@
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
"dev": true
},
"when": {
"version": "3.6.4",
"resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
"integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
"dev": true
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
package.json
+2
View File
@@ -30,6 +30,8 @@
"react": "^16.5.2",
"react-dom": "^16.5.2",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"webpack": "^4.25.1",
"webpack-dev-server": "^3.1.10"
},
src/pages/20181112t6/config.json
+6 -4
View File
@@ -1,7 +1,9 @@
{
"template": "react",
"style": "css",
"proxy": {
"/api": "http://localhost:3000"
}
"https": false,
"proxy":[{
"context": ["/chat", "/socket.io","/res"],
"target": "https://node.dengtongyu.com",
"secure": false
}]
}
src/pages/20181112t6/src/components/MessageList.js
+63
View File
@@ -0,0 +1,63 @@
import React, { Component } from 'react';
import './MessageList.styl';
class MessageList extends Component {
constructor () {
super();
this.element = null;
}
renderList(list) {
if(!list) return [];
let msgElements = [];
for(let i = 0;i<list.length;i++) {
if(list[i].self) {
msgElements.push(
<div class="weui-cell" key={i}>
<div class="weui-cell__bd"></div>
<div class="bubble self weui-cell__ft">{list[i].msg}</div>
<div class="weui-cell__ft head-img hr">
<img src={list[i].img}/>
</div>
</div>
);
}else{
msgElements.push(
<div className="weui-cell" key={i}>
<div className="weui-cell__hd head-img hl">
<img src={list[i].img}/>
</div>
<div className="weui-cell__hd bubble others">{list[i].msg}</div>
</div>
);
}
}
return msgElements;
}
componentDidMount() {
}
componentDidUpdate() {
if(this.element) {
this.element.scrollTop = this.element.scrollHeight;
}
}
componentWillUnmount() {
}
render() {
return (
<div id="msg-content" className="msg-content" ref={(element) => this.element = element}>
{this.renderList(this.props.list)}
</div>
);
}
}
export default MessageList;
src/pages/20181112t6/src/components/MessageList.styl
+65
View File
@@ -0,0 +1,65 @@
.msg-content {
box-sizing: border-box;
overflow-y: auto;
flex: 1;
&>.weui-cell {
box-align: start;
align-items: flex-start;
}
&>.weui-cell:before {
border: none;
}
.head-img {
&>img {
width: 1rem;
height: 1rem;
border-radius: .2rem;
}
}
.hl {
padding-right: .2rem;
}
.hr {
padding-left: .2rem;
}
.bubble {
max-width: 60%;
min-height: .5rem;
line-height: .5rem;
position: relative;
border-radius: .1rem;
padding: .1rem .2rem;
color: #232323;
}
.bubble::before{
content: '';
width: .2rem;
height: .2rem;
position: absolute;
top: .25rem;
transform: rotate(45deg);
}
.others {
background-color: #fff;
border: 1px solid #ededed;
}
.others::before {
background-color: #fff;
border: 1px #ededed;
left: -0.1rem;
border-style: none none solid solid;
}
.self {
background-color: #9eea6a;
border: 1px solid #9eea6a;
}
.self::before {
background-color: #9eea6a;
border: 1px #9eea6a;
right: -0.1rem;
border-style: solid solid none none;
}
}
src/pages/20181112t6/src/components/app.css
-5
View File
@@ -1,5 +0,0 @@
.app {
width: 100%;
height: 100%;
font-size: 16px;
}
src/pages/20181112t6/src/components/app.js
+124 -2
View File
@@ -1,13 +1,135 @@
import React, { Component } from 'react';
import MessageList from './MessageList';
import './app.css';
import './app.styl';
let socket = null;
class App extends Component {
constructor () {
super();
this.handleChange = this.handleChange.bind(this);
this.handleClickBtn = this.handleClickBtn.bind(this);
this.handleEnterKey = this.handleEnterKey.bind(this);
this.state = {
user:(new Date()).getTime(),
userImageId:Math.floor(Math.random()*851 + 1),
onlineUsers:0,
list: [],
message:''
}
}
componentDidMount() {
this.welcomeMessage();
socket = io.connect('/chat');
socket.on('broadcast_online_users', (data) => {
if(data && data.onlineUsers) {
this.state.onlineUsers = data.onlineUsers;
}
});
socket.on('online_users_change', (data) => {
if(data && data.onlineUsers) {
this.state.onlineUsers = data.onlineUsers;
}
});
socket.on('broadcast_chat_message', (data) => {
//console.log('接收到服务器消息',data);
//console.log(msgBox.find('.weui-cell').length);
let listTemp = this.state.list;
if(listTemp.length > 20) {
listTemp.shift();
}
let item = {};
if(data.user == this.state.user) {
item.self = true;
}else{
item.self = false;
}
item.msg = data.msg;
item.img = '/res/images/userimage/' + data.imageId + '.png';
listTemp.push(item);
this.setState({
list:listTemp
});
});
document.addEventListener("keydown",this.handleEnterKey);
}
componentWillUmount(){
document.removeEventListener("keydown",this.handleEenterKey);
}
handleEnterKey (event) {
//console.log(event.keyCode);
if(event.keyCode === 13){
this.sendMessage();
}
}
handleChange(event) {
this.setState({
message:event.target.value
});
}
handleClickBtn() {
this.sendMessage();
}
welcomeMessage() {
this.setState({
list: [
{
self:false,
msg:'欢迎来到老司机开车聊天室！系好安全带，准备开车！',
img:'/res/images/userimage/0.png'
}
]
});
}
sendMessage() {
if(!this.state.message) return false;
let sendData = {
user:this.state.user,
msg:this.state.message,
imageId:this.state.userImageId
}
socket.emit('client_chat_message', sendData);
this.setState({
message:''
});
}
render() {
return (
<div className="app">
Hello World!
<div id="top-bar" className="weui-cell top-bar">
<p>当前在线人数：<span id="online-users">{this.state.onlineUsers}</span></p>
</div>
<MessageList list={this.state.list}/>
<div className="input-bar">
<div className="weui-cell weui-cells_form">
<div className="input-box weui-cell__bd">
<input id="msg-val" className="weui-input" type="text" placeholder="请输入消息"
value={this.state.message}
onChange={this.handleChange}/>
</div>
<div id="send-btn" className="send-box weui-cell__ft" onClick={this.handleClickBtn}>
<a href="javascript:;" className="weui-btn weui-btn_mini weui-btn_primary">发送</a>
</div>
</div>
</div>
</div>
);
}
src/pages/20181112t6/src/components/app.styl
+27
View File
@@ -0,0 +1,27 @@
.app {
height: 100%;
display: flex;
flex-direction: column;
}
.top-bar {
border-bottom: 1px solid #CCCCCC;
&>p {
line-height: 1rem;
}
}
.input-bar {
width: 100%;
border-top: #ccc solid 1px;
#msg-val {
height: .85rem;
}
#send-btn {
&>a {
font-size: .35rem;
}
}
}
src/pages/20181112t6/src/index.css
-10
View File
@@ -1,10 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#root {
width: 100%;
height: 100%;
}
src/pages/20181112t6/src/index.html
+6 -2
View File
@@ -3,17 +3,21 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/pages/webchatroom/favicon.ico">
<link href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" rel="stylesheet">
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://node.dengtongyu.com/node_modules/socket.io-client/dist/socket.io.js"></script>
</body>
</html>
src/pages/20181112t6/src/index.js
+1 -1
View File
@@ -2,6 +2,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';
import './index.styl';
ReactDOM.render(<App />, document.getElementById('root'));
src/pages/20181112t6/src/index.styl
+49
View File
@@ -0,0 +1,49 @@
html {
font-size: 62.5%
}
html,body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
ul,ol,li{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
html,body ,#root {
width: 100%;
height: 100%;
}
div {
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
$norm=750;
transformRem(v)
(v/$norm*10)rem
/*清除浮动*/
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }
.clear {clear:both;display:inline;}
/*字体抗锯齿*/
.thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
/*单行文字超出显示省略号*/
.ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
task/task.js
+3 -1
View File
@@ -34,8 +34,10 @@ exports.init = (type, paths, command) => {
exports.dev = (paths, command) => {
_paths = paths;
_configJson = util.configJson(_paths.targetPath);
if(_configJson.template == 'react') {
webpackConfig.run(paths, command);
webpackConfig.run(paths, command);
}
}
task/webpack.react.js
+9 -4
View File
@@ -27,7 +27,11 @@ let _webpackConfig = {
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
},
{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
},
plugins:[]
@@ -68,7 +72,8 @@ exports.run = (paths, command) => {
port: 8088,
hot: true,
//open: true,
stats: {colors: true}
stats: {colors: true},
https: _configJson.https
}
if(_configJson.proxy) {
@@ -84,13 +89,13 @@ exports.run = (paths, command) => {
//node api 启动本地服务
let server = new webpackDevServer(compiler, devServer);
console.log(_webpackConfig);
//console.log(devServer);
server.listen(devServer.port, 'localhost', (err) => {
if(err) {
console.log(err);
}else{
console.log(chalk.bold.green('服务启动: '+ devServer.contentBase +' : http://localhost:' + devServer.port));
console.log(chalk.bold.green('服务启动: '+ devServer.contentBase +' : '+ devServer.https ? 'https' : 'http' + '://localhost:' + devServer.port));
}
});
template/react/config.json
+6 -4
View File
@@ -1,7 +1,9 @@
{
"template": "react",
"style": "css",
"proxy": {
"/api": "http://localhost:3000"
}
"https": false,
"proxy":[{
"context": ["/api"],
"target": "http://localhost:8080/",
"secure": false
}]
}