當使用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') 
)