webpack+react+react-router兼容ie8

这几天解决了reactie8下兼容性,解决了我们网站在ie8上打开是空白页的问题。亲测完全可用,我们的网站 http://bp.microyan.com。可以在ie8下看看。需要说明的是,我们网站开发的时候完全没有考虑ie8,我们初衷只是兼容chrome。后来做兼容ie8,代码上基本上没做修改,主要是修改了配置文件(修改后的配置文件见下文)。

  1. 首先github上这个教程react-ie8,我们照着先做一遍,其中对我们网站上的修改包括(重点是react降级到v0.14)。

  2. 然后打开我们的ie8浏览器,看看网站打不开的报错信息!如图所示:<br />

    ie8错误提示图片
    <br />
    上面提到的github上,有一份表格,每个错误对应的解决方法,如下图所示:<br />
    ie8错误对应图
    <br />
    这次我们看下,我们ie8上面的每个错误,在下图中都能找到解决办法!每个错误都解决完,我们的网站就能打开了!

  3. 请注意,请注意,请注意,重点来了!
    当我照着我上面的方式一个一个修改的时候,我发现很多错误并不能解决!ie8还是打不开!这是为什么?听我慢慢道来:我们的项目代码分为两部分(我们自己写的代码和node_modules里面引用的外部代码),按照这个github上的教程,我们只能解决我们自己代码中的兼容性,并不能解决node_modules中应用的代码的兼容性!
    比如:Exception thrown and not caught这个问题,他给的解决方法是:把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方,并且在代码中不要使用 export * from 'xxx'
    这样使用其实可以解决我们代码中的兼容性,但是node_modules里面应用的外部库的兼容并不能解决。那我们应该怎么办?
    我们把这些编译文件放到webpack配置文件中,让webpack打包的时候,也去转义node_modules里面的文件!
    比如es5-shim这个库,我们的引用方式如下面的配置文件,我们的es3ify就使用es3ify-webpack-plugin来代替,全部都集成到webpack配置文件中。

本文重要思想:不要仅仅考虑自己写的代码,也需要考虑package.json中引用的别的文件!!!

其他的问题,我们可以自行搜索解决。对了我们当时还删除了webpack-hot-middleware,因为不兼容好像是~

具体配置文件如下:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var es3ifyPlugin = require('es3ify-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map',
    entry: [
        "es5-shim", "es5-shim/es5-sham", 'babel-polyfill', './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'http://localhost:3000/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify('development')
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, 'assets/index-template.html')
        }),
        new es3ifyPlugin()
    ],
    resolve: {
        extensions: [
            '', ".js"
        ],
        root: path.join(__dirname, 'src')
    },
    module: {
        postLoaders: [
            {
                test: /\.js$/,
                loaders: ['export-from-ie8/loader']
            }
        ],
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.js$/,
                loaders: ['babel-loader?cacheDirectory'],
                include: path.join(__dirname, 'src')
            }, {
                test: /\.styl$/,
                loaders: ['style-loader', 'css-loader', 'stylus-loader']
            }, {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader?limit=1'
            }, {
                test: /\.(htc)$/,
                loader: 'url-loader?limit=1'
            }
        ]
    }
};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,340评论 4 31
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,253评论 7 35
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,219评论 40 247
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,253评论 0 21
  • 炽热与喧嚣在城市的街头渐渐褪去 浮屠塔的钟声在人们心中的远方开始回荡 久久难以忘却 一滴水 携带着丝丝寒意在嫩叶上...
    不懂wz阅读 280评论 0 2