Question

在几乎所有浏览器上，Javascript似乎都运行良好。但是，对于一些较旧的浏览器和IE11，它看起来很糟糕。

我怀疑是这种情况，因为提交表单时event.preventDefault()并未触发。并且没有其他功能被调用。但React路由器似乎正常工作。我也使用jQuery（是的，我知道），当我尝试运行控制台命令时，它似乎无法工作。

这是我的Webpack配置：

var path = require('path');
var webpack = require('webpack');

var config = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './app/main'
  ],
  output: {
    path: path.join(__dirname, 'public', 'js'),
    filename: 'bundle.js',
    publicPath: '/js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: [
            ['react-transform', {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module']
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react']
                }
              ]
            }]
          ]
        }
      }
    ]
  }
};

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false
      }
    })
  );
}

module.exports = config;

我在主文件中导入的内容：

import React from 'react';
import { connect } from 'react-redux'
import { Link } from 'react-router';
import { betaRequest } from '../actions/auth'
import Messages from './Messages'
import $ from 'jquery'

我（不幸的是）也使用Jade作为＆＃34; root＆＃34;文件：

doctype html
html
  head
    meta(charset='utf-8')
    meta(http-equiv='x-ua-compatible', content='ie=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    title='...'
    link(rel='stylesheet', href='/css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Bungee+Shade')
  body
    #app!= html
    script.
    window.INITIAL_STATE = !{JSON.stringify(initialState)}

    script(src='/js/lib/jquery.js')
    script(src='/js/lib/bootstrap.js')
    script(src='/js/bundle.js')

    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script.
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      e.src='https://www.google-analytics.com/analytics.js';
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      ga('create','...','auto');ga('send','pageview');

提交表格的功能：

  handleSignup(event) {
    event.preventDefault();
    this.props.dispatch(submit(this.state.name, this.state.email));

  }

也不在生产中工作：

  jumpToPlaceOnPage() {
    $('html,body').animate({
          scrollTop: document.getElementById("requestBetaSection").offsetTop
        }, 800);
  }

获得以下错误： (index):1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

在IE11和旧浏览器中破解的Javascript - node + react + webpack生成版本

0 个答案: