Skip to content

Commit ff8a43f

Browse files
hezeduhezedu
committed
3
1 parent 299ec37 commit ff8a43f

23 files changed

+616
-0
lines changed

‎.babelrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"presets": ["es2015", "stage-0", "react"],
3+
"plugins": ["transform-runtime"],
4+
"env":{
5+
"production": {
6+
"plugins": ["transform-runtime", "transform-remove-debugger", "transform-remove-console"]
7+
}
8+
}
9+
}

‎.eslintignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
webpack.config.js
2+
.eslintrc.js
3+
node_modules
4+
script

‎.eslintrc.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"commonjs": true,
5+
"es6": true
6+
},
7+
"extends": "eslint:recommended",
8+
"parser": "babel-eslint",
9+
"parserOptions": {
10+
"ecmaFeatures": {
11+
"experimentalObjectRestSpread": true,
12+
"jsx": true
13+
},
14+
"sourceType": "module"
15+
},
16+
"plugins": [
17+
"react"
18+
],
19+
"rules": {
20+
"indent": [
21+
"error",
22+
2
23+
],
24+
"no-unused-vars": "warn",
25+
"no-trailing-spaces": "warn",
26+
"no-multiple-empty-lines": "warn",
27+
"prefer-const": 0,
28+
"space-infix-ops": "error",
29+
"camelcase": "error",
30+
"no-console": 0,
31+
"linebreak-style": 0,
32+
"quotes": 0,
33+
"semi": 0,
34+
"react/jsx-uses-vars": "error"
35+
}
36+
}

‎.htmlhintrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"tagname-lowercase": true,
3+
"attr-lowercase": true,
4+
"attr-value-double-quotes": true,
5+
"doctype-first": false,
6+
"id-unique": true,
7+
"space-tab-mixed-disabled": "space"
8+
}

‎config/dev.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var conf = {
2+
bundleName: '[name]_bundle.js', //打包文件的名字
3+
chunkName: '[name]_chunk.js', //由code-spliting生成的文件名字
4+
indexDir: './', //生成index.html的目录。
5+
baseUrl: '', //网站基本url. 比如：https://hezedu.github.io/clear 的 /clear
6+
indexData: { //这里数据将会传给index.ejs。
7+
//build时传自动添加：BASE_URL,BASE_STATIC两个属性。
8+
}
9+
};
10+
11+
module.exports = conf;

‎config/pro.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var _ = require('lodash');
2+
var base = require('./dev');
3+
4+
const conf = {
5+
indexDir: './dist',
6+
baseUrl: ''
7+
};
8+
9+
module.exports = _.merge(base, conf);

‎index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
6+
<link rel="shortcut icon" href="/static/favicon.png">
7+
<title>clear前端架构</title>
8+
</head>
9+
<body>
10+
<div id="app" class="clear_app"></div>
11+
<script>
12+
var SERVER_CONFIG = {"STATIC_PATH":"/dist","BASE_URL":"","VERSION":"2.1.2"}
13+
</script>
14+
<script type="text/javascript" src="/dist/dev/build/a_1_mainifest_bundle.js"></script><script type="text/javascript" src="/dist/dev/build/a_out_lib_bundle.js"></script><script type="text/javascript" src="/dist/dev/build/b_react_vendor_bundle.js"></script><script type="text/javascript" src="/dist/dev/build/z_app_bundle.js"></script></body>
15+
</html>

‎package.json

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "test",
3+
"version": "2.1.2",
4+
"private": true,
5+
"description": "",
6+
"main": "app.bundle.js",
7+
"scripts": {
8+
"test": "echo \"Error: no test specified\" && exit 1",
9+
"start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 4000",
10+
"pro": "node script/pro"
11+
},
12+
"ignore": [
13+
"dist"
14+
],
15+
"author": "hezedu",
16+
"dependencies": {
17+
"history": "^2.1.2",
18+
"react": "^15.3.1",
19+
"react-dom": "^15.3.1",
20+
"react-redux": "^4.4.5",
21+
"react-router": "^2.7.0",
22+
"redux": "^3.5.2",
23+
"lodash": "^4.15.0",
24+
"react-router-redux": "^4.0.7"
25+
},
26+
"devDependencies": {
27+
"babel-core": "^6.14.0",
28+
"babel-eslint": "^6.1.2",
29+
"babel-loader": "^6.2.5",
30+
"babel-plugin-transform-es2015-modules-commonjs": "^6.14.0",
31+
"babel-plugin-transform-remove-console": "^6.8.0",
32+
"babel-plugin-transform-remove-debugger": "^6.8.0",
33+
"babel-plugin-transform-runtime": "^6.12.0",
34+
"babel-preset-es2015": "^6.14.0",
35+
"babel-preset-react": "^6.11.1",
36+
"babel-preset-stage-0": "^6.5.0",
37+
"babel-runtime": "^6.11.6",
38+
"css-loader": "^0.24.0",
39+
"eslint": "^3.4.0",
40+
"eslint-loader": "^1.5.0",
41+
"eslint-plugin-jsx-a11y": "^2.2.0",
42+
"eslint-plugin-react": "^6.2.0",
43+
"fuckwinfsdel": "^1.2.1",
44+
"html-loader": "^0.4.3",
45+
"html-webpack-plugin": "^2.22.0",
46+
"node-sass": "^4.5.2",
47+
"postcss-loader": "^0.11.0",
48+
"react-hot-loader": "^1.3.0",
49+
"rucksack-css": "^0.8.6",
50+
"sass-loader": "^4.0.0",
51+
"style-loader": "^0.13.1",
52+
"webpack": "^1.13.2",
53+
"webpack-dev-server": "^1.15.0"
54+
}
55+
}

‎script/pro.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
process.env.NODE_ENV = 'production';
2+
process.env.NODE_BUILD_CONF_NAME = 'pro';
3+
var child_process = require('child_process');
4+
var path = require('path');
5+
var del = require('fuckwinfsdel');
6+
var conf = require('../config/pro');
7+
var clearDir = path.join(__dirname,'../', conf.indexDir, conf.staticPath , 'pro');
8+
9+
var build_sh = 'webpack --colors';
10+
console.log('开始清空:',clearDir, '...');
11+
del(clearDir, function(err){
12+
if(err){
13+
console.error(err);
14+
}
15+
console.log('开始build...');
16+
child_process.exec(build_sh, function(err, result){
17+
if(err){
18+
return console.log('build 失败', err);
19+
}
20+
console.log(result);
21+
});
22+
})
23+
24+
25+
//var path = require('path');
26+
// function(env){
27+
// if(process.platform.substr(0,3)==='win'){
28+
// return 'set NODE_ENV=' + env + '&& '
29+
// }
30+
// return 'NODE_ENV=' + env + ' ';
31+
// }
32+
//var del = require('fuckwinfsdel');
33+
//var clearDir = path.join('__dirname','../', conf.outPutDir, conf.outPutFile);
34+
// var util = require('./util');
35+
// var envFactory = util.envFactory;
36+
//var sh = envFactory('production') + build_sh;
37+
// console.log('开始清空:',clearDir);
38+
// del(clearDir, function(){
39+
// console.log('开始build...');
40+
// child_process.exec(build_sh, function(err, result){
41+
// if(err){
42+
// return console.log('build 失败', err);
43+
// }
44+
// console.log(result);
45+
// });
46+
// });

‎src/app.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import ReactDOM from 'react-dom';
2+
import {Router, useRouterHistory} from 'react-router';
3+
import createHashHistory from 'history/lib/createHashHistory';
4+
import { syncHistoryWithStore } from 'react-router-redux';
5+
import routingStore from './store/routing';
6+
import { Provider } from 'react-redux'
7+
8+
const mount = document.getElementById('app');
9+
let history = useRouterHistory(createHashHistory)({queryKey: false});
10+
history = syncHistoryWithStore(history, routingStore);
11+
12+
import AppRoutes from './router.config';
13+
14+
ReactDOM.render(
15+
<Provider store={routingStore}>
16+
<Router history={history} routes={AppRoutes} />
17+
</Provider>,
18+
mount
19+
);

‎src/app.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<style>
2+
.title{font-size: 50px}
3+
</style>
4+
5+
<template>
6+
.title {{msg}}
7+
</template>
8+
9+
<script>
10+
export default {
11+
data(){
12+
return {
13+
msg: 'hello Vue'
14+
}
15+
}
16+
}
17+
</script>

‎src/cmpt/demo.jsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Component , PropTypes} from 'react';
2+
import style from '../css/style.scss';
3+
import countStore from '../store/count';
4+
import {connect, Provider} from 'react-redux';
5+
6+
class Title extends Component {
7+
static PropTypes = {
8+
msg: PropTypes.string
9+
};
10+
changeMsg = changeMsg;
11+
state = {msg: 'world'}
12+
addCount(){
13+
this.props.dispatch({type:'INCREMENT'})
14+
}
15+
reduceCount(){
16+
this.props.dispatch({type:'DECREMENT'})
17+
}
18+
render() {
19+
return (<div>
20+
<hr/>
21+
<span>props.msg = </span><b>{this.props.msg}</b>
22+
<span>state.msg = </span><b>{this.state.msg}</b>
23+
<button onClick={::this.changeMsg}>改变state</button>
24+
<br/>
25+
<span>store count = </span><b>{this.props.count}</b>
26+
<button onClick={::this.addCount}>增加count</button>
27+
<button onClick={::this.reduceCount}>减少count</button>
28+
<p/>
29+
<hr/>
30+
</div>);
31+
}
32+
}
33+
34+
const mapStateToProps = (state) => { return {count:state}; };
35+
const CountTitle = connect(mapStateToProps)(Title);
36+
function changeMsg() {
37+
var msg = this.state.msg;
38+
msg = msg.split('').reverse().join('');
39+
this.setState({msg});
40+
}
41+
42+
class H1 extends Component {
43+
render() {
44+
return (
45+
<h1>{this.props.msg.split('').join(this.props.count)}</h1>
46+
);
47+
}
48+
}
49+
const CountH1 = connect(mapStateToProps)(H1);
50+
51+
class Index extends Component {
52+
state= {msg: 'hello'};
53+
changeMsg = changeMsg;
54+
render() {
55+
return (
56+
<div className={style.test}>
57+
<h1>react+redux Demo</h1>
58+
<br/>
59+
<span>state.msg = </span><b>{this.state.msg}</b>
60+
<button onClick={::this.changeMsg} style={{margin:'5px'}}>改变state</button>
61+
<Provider store={countStore}>
62+
<CountTitle msg={this.state.msg} />
63+
</Provider>
64+
<Provider store={countStore}>
65+
<CountH1 msg={this.state.msg} />
66+
</Provider>
67+
</div>
68+
);
69+
}
70+
}
71+
72+
export default Index;

‎src/cmpt/home.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component} from 'react';
2+
import style from '../css/style.scss';
3+
4+
class Index extends Component {
5+
render() {
6+
return (
7+
<div className={style.test}>
8+
<h1>Clear</h1>
9+
<hr/>
10+
<h3>SERVER_CONFIG</h3>
11+
<pre>
12+
{JSON.stringify(window.SERVER_CONFIG)}
13+
</pre>
14+
</div>
15+
);
16+
}
17+
}
18+
19+
export default Index;

‎src/cmpt/layout.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component} from 'react';
2+
import { Link } from 'react-router';
3+
4+
export class Top extends Component {
5+
render() {
6+
return (
7+
<div className="root">
8+
<div className="top">
9+
<Link to='/' onlyActiveOnIndex={true} activeClassName='active'>home</Link>
10+
<Link to='/demo' activeClassName='active'>demo</Link>
11+
<Link to='/test' activeClassName='active'>test</Link>
12+
</div>
13+
<div className="bottom">{this.props.children}</div>
14+
</div>
15+
);
16+
}
17+
}
18+
19+
export class NotFound extends Component {
20+
render() {
21+
return (
22+
<h1>404 NotFound</h1>
23+
);
24+
}
25+
}

‎src/cmpt/test/index.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component} from 'react';
2+
const _require = require('./ri');
3+
import * as _import from './ri';
4+
5+
const _requireHaveModule = require('./ri2');
6+
import * as _importHaveModule from './ri2';
7+
import ImportHaveModule from './ri2';
8+
console.log(ImportHaveModule === _requireHaveModule )
9+
console.log(ImportHaveModule === _importHaveModule.default )
10+
class Index extends Component {
11+
render() {
12+
return (
13+
<div>
14+
<h2>require一个没有module.exports的文件</h2>
15+
{JSON.stringify(_require)}
16+
<h2>import *一个没有module.exports的文件</h2>
17+
{JSON.stringify(_import)}
18+
<h3>结论:exports. = export</h3>
19+
<hr/>
20+
<h2>加上module.exports后的require</h2>
21+
{JSON.stringify(_requireHaveModule)}
22+
<h2>加上module.exports后的import *</h2>
23+
{JSON.stringify(_importHaveModule)}
24+
<h3>结论:module.exports = export default</h3>
25+
<hr/>
26+
最终结论:
27+
<h1>require !== import * !== import default</h1>
28+
</div>
29+
);
30+
}
31+
}
32+
33+
export default Index;

0 commit comments

Comments
 (0)