Created
July 1, 2016 20:30
-
-
Save cj3kim/edd83cfac4e05f62607331adcbb3699e to your computer and use it in GitHub Desktop.
What is causing babel to be so slow here?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "rrr-server-example", | |
| "version": "0.0.0", | |
| "repository": "reactjs/react-router-redux", | |
| "license": "MIT", | |
| "dependencies": { | |
| "react": "^0.14.7", | |
| "react-dom": "^0.14.7", | |
| "react-redux": "^4.3.0", | |
| "react-router": "^2.0.0", | |
| "react-router-redux": "^4.0.0", | |
| "redux": "^3.2.1", | |
| "serialize-javascript": "^1.1.2" | |
| }, | |
| "devDependencies": { | |
| "babel-cli": "^6.5.1", | |
| "babel-core": "^6.4.5", | |
| "babel-eslint": "^5.0.0-beta9", | |
| "babel-loader": "^6.2.2", | |
| "babel-plugin-module-alias": "^1.2.0", | |
| "babel-preset-es2015": "^6.3.13", | |
| "babel-preset-react": "^6.3.13", | |
| "babel-preset-stage-1": "^6.3.13", | |
| "babel-register": "^6.5.2", | |
| "eslint": "^1.10.3", | |
| "eslint-config-rackt": "^1.1.1", | |
| "eslint-plugin-react": "^3.16.1", | |
| "express": "^4.13.4", | |
| "redux-devtools": "^3.1.1", | |
| "redux-devtools-dock-monitor": "^1.0.1", | |
| "redux-devtools-log-monitor": "^1.0.4", | |
| "webpack": "^1.12.13", | |
| "webpack-dev-middleware": "^1.5.1" | |
| }, | |
| "scripts": { | |
| "start": "babel-node server.js" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*eslint-disable no-console */ | |
| import express from 'express' | |
| import serialize from 'serialize-javascript' | |
| import webpack from 'webpack' | |
| import webpackDevMiddleware from 'webpack-dev-middleware' | |
| import webpackConfig from './webpack.config' | |
| import React from 'react' | |
| import { renderToString } from 'react-dom/server' | |
| import { Provider } from 'react-redux' | |
| import { createMemoryHistory, match, RouterContext } from 'react-router' | |
| import { syncHistoryWithStore } from '../../src' | |
| import { configureStore } from './store' | |
| import routes from './routes' | |
| const app = express() | |
| app.use( | |
| webpackDevMiddleware( | |
| webpack(webpackConfig), | |
| { publicPath: '/__build__/', | |
| stats: { colors: true }}) | |
| ) | |
| const HTML = ({ content, store }) => ( | |
| <html> | |
| <body> | |
| <div id="root" dangerouslySetInnerHTML={{ __html: content }}/> | |
| <div id="devtools"/> | |
| <script dangerouslySetInnerHTML={{ __html: `window.__initialState__=${serialize(store.getState())};` }}/> | |
| <script src="/__build__/bundle.js"/> | |
| </body> | |
| </html> | |
| ) | |
| app.use(function (req, res) { | |
| const memoryHistory = createMemoryHistory(req.url) | |
| const store = configureStore(memoryHistory) | |
| const history = syncHistoryWithStore(memoryHistory, store) | |
| console.log('==> store', store); | |
| match( | |
| { history, routes, location: req.url }, | |
| (error, redirectLocation, renderProps) => { | |
| if (error) { | |
| res.status(500).send(error.message) | |
| } else if (redirectLocation) { | |
| res.redirect(302, redirectLocation.pathname + redirectLocation.search) | |
| } else if (renderProps) { | |
| const content = renderToString( | |
| <Provider store={store}> | |
| <RouterContext {...renderProps}/> | |
| </Provider>) | |
| res.send('<!doctype html>\n' + renderToString(<HTML content={content} store={store}/>)) | |
| } | |
| }) | |
| }) | |
| app.listen(8080, function () { | |
| console.log('Server listening on http://localhost:8080, Ctrl+C to stop') | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment