当使用webpack导出react和react-router到一个独立的html文件时，应用程序无法运行

Question

我试图将我的反应SPA导出为单个html与js，所以我可以将它安装到phonegap应用程序中。

我有我的生产“准备好”webpack.config但是，当我导出文件时，一切都捆绑起来，似乎是好的。但是应用程序在到达Provider时停止。

入口点 - SRC /客户/ JS/Entry.js

这是入口点

import React, { Component, PropTypes } from 'react' 
import {render} from 'react-dom'; 
import { Router, browserHistory, Route, IndexRoute } from 'react-router'; 
import { Provider } from 'react-redux'; 
import { syncHistoryWithStore } from 'react-router-redux' 

import Root from './core/Provider' 
import configureStore from './core/Store' 

const store = configureStore; 
const history = syncHistoryWithStore(browserHistory, store) 

console.info('Entry') //OUTPUTS correctly 
render(
    <Root store={store} history={history} />, 
    document.getElementById('app') 
) 

我可以证实，<div id="app"></div>中就有关于页面加载。

Provider.js

import React, { Component, PropTypes } from 'react' 
import { Provider } from 'react-redux' 
import { Router, Route, IndexRoute } from 'react-router' 

import App from './App'; 
//###### Routes ####### 
import Splash from '../components/pages/Splash'; 

export default class Root extends Component { 
    render() { 
    console.info('Provider'); //Provider Correct 
    const { store, history } = this.props; 
    return (
     <Provider store={store}> 
      <Router history={history}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Splash}/> 

      </Route> 
      </Router> 
     </Provider> 
    ) 
    } 
} 

Root.propTypes = { 
    store: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired 
} 

App.js

import React, { Component, PropTypes } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import * as ActionCreator from '../actions/ActionCreator'; 

import { browserHistory } from 'react-router' 

class App extends Component { 

    constructor(props) { 
     super(props) 
     this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(nextValue) { 
     browserHistory.push(`/${nextValue}`) 
    } 

    render() { 
     console.info('App'); //No console log, does not render 
     return (
      <div> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

App.propTypes = { 
    // Injected by React Router 
    children: PropTypes.node 
} 

function mapStateToProps(state, ownProps) { 
    return { 
     errorMessage: state.errorMessage, 
     inputValue: ownProps.location.pathname.substring(1) 
    } 
} 
function mapDispatchToProps(dispatch) { 
    return { 
     SexAction: bindActionCreators(ActionCreator, dispatch) 
    } 
} 
export default connect(mapStateToProps, mapDispatchToProps)(App) 

我当应用程序被正确

运行预期

我所用独立的应用程序

Store.js

import { createStore, applyMiddleware, compose } from 'redux' 
import thunk from 'redux-thunk' 
import createLogger from 'redux-logger' 
import rootReducer from './Reducers' 
import defaultStates from '../states/statesDefault' 

const configureStore = function (preloadedState) { 
    const Store = createStore(
     rootReducer, 
     preloadedState, 
     compose(
      applyMiddleware(thunk, createLogger()) 
     ) 
    ) 

    if (module.hot) { 
     // Enable Webpack hot module replacement for reducers 
     module.hot.accept('./Reducers',() => { 
      const nextRootReducer = require('../../js/Entry').default; 
      Store.replaceReducer(nextRootReducer) 
     }) 
    } 

    return Store; 
}; 

export default configureStore(defaultStates); 

Webpack.prod.js看到

....... 
module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: [ 
    path.join(__dirname, 'src/client/js/Entry') 
    ], 
    output: { 
    path: path.join(__dirname, '/dist/'), 
    filename: '[name]-[hash].min.js', 
    publicPath: './' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new HtmlWebpackPlugin({ 
     template: 'public/index.tpl.html', 
     inject: 'body', 
     filename: 'index.html' 
    }), 
    new ExtractTextPlugin('[name]-[hash].min.css'), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false, 
     screw_ie8: true 
     } 
    }), 
    new StatsPlugin('webpack.stats.json', { 
     source: false, 
     modules: false 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0'], 
     include: __dirname 
     } 
    ...... 
}; 

一切都被正确

出口[编辑] - Node.js的&快速

我意识到我已经错过了信息的键位毫无疑问的。我正在使用节点并表达。我开始我的应用程序npm start

const path = require('path'); 
const express = require('express'); 
const webpack = require('webpack'); 
const webpackMiddleware = require('webpack-dev-middleware'); 
const webpackHotMiddleware = require('webpack-hot-middleware'); 
const config = require('./webpack.config.js'); 

const isDeveloping = process.env.NODE_ENV !== 'production'; 
const port = isDeveloping ? 6004 : process.env.PORT; 
const app = express(); 


app.use(express.static(__dirname + '/public/')); 

const compiler = webpack(config); 
const middleware = webpackMiddleware(compiler, { 
    publicPath: config.output.publicPath, 
    contentBase: 'public', 
    stats: { 
    colors: true, 
    hash: false, 
    timings: true, 
    chunks: false, 
    chunkModules: false, 
    modules: false 
    } 
}); 

app.use(middleware); 
app.use(webpackHotMiddleware(compiler)); 
app.get('*', function response(req, res) { 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'public/index.html'))); 
    res.end(); 
}); 

app.listen(port, '0.0.0.0', function onStart(err) { 
    if (err) { 
    console.log(err); 
    } 
    console.info('==> Listening on port %s. Open up http://0.0.0.0:%s/ in your browser.', port, port); 
}); 

Answer 1

我们发现在聊天，这个问题是HTML 5 API的历史与file://网址的不相容性（至少在Chrome）。由react-router提供的browserHistory是一个包装。然而，对于file://的网址，你可以使用hashHistory代替：

import { Router, hashHistory, Route, IndexRoute } from 'react-router'; 

// ... 

render(
    <Root store={store} history={hashHistory} />, 
    document.getElementById('app') 
)