FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

update babel server config · universal-react/tutorial@42eccca · GitHub

/ tutorial Public

Commit 42eccca

Browse files
MrKou47
committed
update babel server config
1 parent 8e9d95f commit 42eccca

9 files changed

Lines changed: 86 additions & 56 deletions

File tree

‎.babelrc‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
"react"
66
],
77
"plugins": [
8+
["universal-import", {
9+
"babelServer": true
10+
}],
811
"transform-runtime",
912
"transform-decorators-legacy",
10-
"babel-plugin-transform-class-properties",
11-
"dual-import"
13+
"babel-plugin-transform-class-properties"
1214
],
1315
"sourceMaps": true
1416
}

‎.vscode/launch.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
"name": "Launch via Babel",
88
"program": "${workspaceRoot}/src/server/server.js",
99
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
10-
"args": [
11-
"--plugins",
12-
"system-import-transformer",
13-
"--"
14-
],
1510
"env": {
1611
"NODE_ENV": "development",
1712
}

‎favicon.ico‎

1.37 KB
Binary file not shown.

‎src/client/app.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import React from 'react';
2-
import { BrowserRouter } from 'react-router-dom';
3-
import { renderRoutes } from 'react-router-config';
4-
import routers from './routers';
2+
import { AsyncHome, AsyncProfile } from './routers';
3+
import { Route, Link } from 'react-router-dom'
54

6-
const Main = () => (
7-
<BrowserRouter>
8-
{renderRoutes(routers)}
9-
</BrowserRouter>
10-
);
5+
export default class App extends React.Component {
6+
render() {
7+
return (
8+
<div>
9+
<div>
10+
<ul>
11+
<li><Link to={'/'}>Home</Link></li>
12+
<li><Link to={'/profile'}>profile</Link></li>
13+
</ul>
14+
<Route exact path={'/profile'} component={AsyncProfile} />
15+
<Route exact path={'/'} component={AsyncHome} />
16+
</div>
17+
</div>
18+
)
19+
}
20+
}
1121

12-
export default Main;
22+
// export default Main;

‎src/client/render.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
/* eslint-env browser */
2-
3-
import App from './app';
4-
import configureStore from './store';
52
import React from 'react';
63
import ReactDOM from 'react-dom';
74
import { Provider } from 'react-redux';
5+
import { BrowserRouter } from 'react-router-dom'
6+
import configureStore from './store';
7+
import App from './app';
88

99
const store = configureStore(window.initialState);
1010

11-
window.dev = { store };
12-
1311
ReactDOM.render(
1412
<Provider store={store}>
15-
<App />
13+
<BrowserRouter>
14+
<App />
15+
</BrowserRouter>
1616
</Provider>,
1717
document.getElementById('app')
1818
);

‎src/client/routers.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,32 @@ import React from 'react';
33
import universal from 'react-universal-component'
44
import AppRoot from './container/root';
55

6-
const AsyncHome = universal(() => import('./container/home'), {
6+
export const AsyncHome = universal(() => import('./container/home'), {
77
resolve: () => require.resolveWeak('./container/home'),
88
chunkName: 'container/home',
99
minDelay: 500,
1010
});
1111

12-
const AsyncProfile = universal(() => import('./container/profile'), {
12+
export const AsyncProfile = universal(() => import('./container/profile'), {
1313
resolve: () => require.resolveWeak('./container/profile'),
1414
chunkName: 'container/profile',
1515
minDelay: 500,
1616
});
1717

18-
const routes = [
19-
{
20-
path: '/',
21-
exact: true,
22-
component: AppRoot
23-
},
24-
{
25-
path: '/home',
26-
component: AsyncHome,
27-
},
28-
{
29-
path: '/profile',
30-
component: AsyncProfile
31-
}
32-
];
18+
// const routes = [
19+
// {
20+
// path: '/',
21+
// exact: true,
22+
// component: AppRoot
23+
// },
24+
// {
25+
// path: '/home',
26+
// component: AsyncHome,
27+
// },
28+
// {
29+
// path: '/profile',
30+
// component: AsyncProfile
31+
// }
32+
// ];
3333

34-
export default routes;
34+
// export default routes;

‎src/server/rf.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const rimraf = require('rimraf');
2+
const path = require('path');
3+
4+
console.log(path.resolve('dist'), process.cwd())
5+
6+
const distPath = path.join(__dirname, '../../dist');
7+
console.log(distPath)
8+
rimraf.sync(`${distPath}/*`);

‎src/server/utils/render.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import flushChunks from 'webpack-flush-chunks'
77
import { renderRoutes, matchRoutes } from 'react-router-config';
88
import { StaticRouter } from 'react-router-dom';
99
// user config
10-
import routers from '../../client/routers';
10+
// import routers from '../../client/routers';
1111
import initialStore from '../../client/store';
1212
// template function return string
1313
import { tmpl } from './tmpl';
14+
import App from '../../client/app';
1415

1516
function render(clientStats) {
1617
const chunkNames = flushChunkNames();
@@ -19,23 +20,23 @@ function render(clientStats) {
1920
return function (req, res, next) {
2021
const store = initialStore();
2122
const { dispatch } = store;
22-
const branch = matchRoutes(routers, req.url);
23-
const styleObj = {};
24-
const promiseList = branch.map(({ route }) => {
25-
const { component } = route;
26-
return route.component.getInitialData ? route.component.getInitialData(dispatch) : Promise.resolve();
27-
});
23+
// const branch = matchRoutes(routers, req.url);
24+
// const styleObj = {};
25+
// const promiseList = branch.map(({ route }) => {
26+
// const { component } = route;
27+
// return route.component.getInitialData ? route.component.getInitialData(dispatch) : Promise.resolve();
28+
// });
2829

29-
Promise.all(promiseList)
30-
.then(v => {
30+
// Promise.all(promiseList)
31+
// .then(v => {
3132
const content = renderToString(
3233
<Provider store={store}>
3334
<StaticRouter location={req.url} context={{}}>
34-
{renderRoutes(routers)}
35+
<App />
3536
</StaticRouter>
3637
</Provider>
3738
);
38-
console.log(styles.toString())
39+
console.log(content)
3940
res.send(
4041
`<!doctype html>
4142
<html>
@@ -59,11 +60,11 @@ function render(clientStats) {
5960
// initialCss: styleObj
6061
// })
6162
// );
62-
})
63-
.catch(err => {
64-
console.log(err);
65-
res.end("didn\'t match any route. Check your url");
66-
});
63+
// })
64+
// .catch(err => {
65+
// console.log(err);
66+
// res.end("didn\'t match any route. Check your url");
67+
// });
6768
}
6869
}
6970

‎webpack/webpack.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,20 @@ const config = {
2626
test: /jsx?/,
2727
use: {
2828
loader: 'babel-loader',
29+
options: {
30+
presets: [
31+
"stage-0",
32+
"es2015",
33+
"react"
34+
],
35+
plugins: [
36+
"transform-runtime",
37+
"transform-decorators-legacy",
38+
"babel-plugin-transform-class-properties",
39+
"universal-import"
40+
],
41+
babelrc: false
42+
}
2943
},
3044
exclude: /node_modules/,
3145
},

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL