运行webpack部署configuration时如何解决'window is not defined'？
我试图部署一个反应+服务器应用程序到Heroku。 总体目标是使用Heroku dyno作为通用服务器来提供静态资源，并充当我的React应用程序的API端点。 我正在编写一个部署configuration来缩小和遇到一个错误。
它缩小了，但在node dist/bundle.js它给出了以下错误。
ReferenceError: window is not defined
要使用googlemaps api，我有一个Map组件，它将全局窗口对象上的一个函数设置为initMap() ，在Map组件中定义。
并在一个loadJS()引用window.document两次。
正在开发中，它工作正常。
我使用这个post来帮助使Google地图与React协同工作
我怀疑窗口对象是未定义的，因为没有浏览器提供窗口对象。
你能证实我的怀疑吗？ 需要什么来弥补这个问题？
脚本在我的package.json文件中
"scripts": { "start": "npm build && node dist/bundle.js", "dev-start": "babel-node server/buildScripts/server.js", "build":"webpack --config ./webpack.deployment.config.js", "test": "echo \"Error: no test specified\" && exit 1" },
webpack.deployment.config.js
const path = require('path'); const webpack = require('webpack'); module.exports = { devtool: 'source-map', entry: [ './client/index.js' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: './dist/' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: { warnings: false }, sourceMap: true }) ], module: { loaders: [{ test: /.jsx?$/, loader: 'babel-loader', include: path.join(__dirname, 'client'), exclude: /node_modules/, query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.(jpg|png|svg)$/, use: 'file-loader'} ] }, };
客户端/组件/ Googlemaps.js
import React, { Component } from 'react' import { connect } from 'react-redux' import { getGoogleGeoLocation } from '../actions/index.js' class Map extends React.Component { constructor(props) { super(props); this.initMap = this.initMap.bind(this) } initMap() { if(!this.props.location.lat ) { let map = new google.maps.Map(this.refs.map, { center: { lat: 36.1699, lng: -115.1398 }, zoom: 12 }); } else { let lat = parseFloat(this.props.location.lat) let lng = parseFloat(this.props.location.lng) let map = new google.maps.Map(this.refs.map, { center: { lat, lng }, zoom: 12 }); } } componentDidMount() { window.initMap = this.initMap; loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyAvn1WOC1uXO7jw820pYZsSzZUNh5g7cTs&callback=initMap') this.props.fetchLocation() } componentDidUpdate() { loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyAvn1WOC1uXO7jw820pYZsSzZUNh5g7cTs&callback=initMap') } render() { const mapStyle = { width: 1000, height: 500, }; if (this.props.hasErrored) { return <p>Sorry! There was an error loading the items</p>; } if (this.props.isLoading) { return ( <div> <h4>loading...</h4> <div ref="map" style={mapStyle}></div> </div> ); } else { return ( <div id='map' ref="map"></div> ); } } } function loadJS(src) { var ref = window.document.getElementsByTagName("script")[0]; var script = window.document.createElement("script"); script.src = src; script.async = true; ref.parentNode.insertBefore(script, ref); } const mapStateToProps = (state) => { return { location: state.location, hasErrored: state.locationHasErrored, isLoading: state.locationIsLoading }; }; const mapDispatchToProps = (dispatch) => { return { fetchLocation: (url) => dispatch(getGoogleGeoLocation()) }; }; export default connect(mapStateToProps, mapDispatchToProps)(Map)
这听起来像你需要使用npm模块jsdom，它提供了浏览器环境之外的window / window.document对象。