redux+react+webpack+熱載入+相容IE8

動機

（備忘錄，持續更新）專案需要支援到IE8，並且我是深度懶癌患者，於是選擇了高配帶有熱載入 功能的（相容了IE）環境。專案地址在下面。

剛剛接觸react+redux架構沒多久，用了大半天時間搭了redux+react+hot-middleware+supportIE8的環境。也分享給剛剛接觸、需要現成腳手架的朋友。基礎框架參照官方DEMO而來，僅對框架做了一些細微調整和IE相容。如果喜歡請點star(有動力更新嘛)。PS: src目錄下，是一個極簡的todo，你可以隨意刪除、替換為你的專案資源。

使用

安裝依賴

npm install

執行

npm start //localhost:3000

build

npm run build //build後index.html需要手動修改script路徑，這裡我有時間會修改為自動替換

已知問題（收集中）

1.開發環境中，IE8下不顯示介面，通過build打包後是沒問題的，不影響使用。如果有大神解決了這個問題，可以在下面留言或 Pull Request。
2.收集中…

方案

下面貼出環境的就些依賴和配置，我會陸續添加註釋。package.json中不應該有註釋，所以請不要複製使用，可以從github上拉取

package.json

{
  "name": "redux-react-supportIE8-template",
  "version": "1.0.0",
  "description": "React support IE8",
  "main": "./src/index.js",
  "scripts": {
    "start": "node server.js",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build": "npm run build:webpack"
 
,
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "iVan <[email protected]>",
  "dependencies": {
    "eventsource-polyfill": "^0.9.6", //support ie8
    "fetch-ie8": "^1.4.0", //support ie8
    "object-assign": "^4.0.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1"
  },
  "devDependencies": {
    "babel-loader": "^6.2.0",
    //babel對export default{}支援不好，不想寫成module.exports就安裝下面
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-preset-es2015": "^6.3.13", //ES2015轉碼規則
    "babel-preset-react": "^6.3.13",  //react轉碼規則
    "babel-preset-stage-0": "^6.3.13", //ES7不同階段語法提案的轉碼規則，一共有4個，選擇安裝一個
    "es3ify-loader": "^0.1.0",
    "express": "^4.13.3",
    "cross-env": "^1.0.6",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

下面配置server：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');

var app = express();
var compiler = webpack(config);
//通過localhost可以訪問專案資料夾下的所有檔案，等於動態為每個靜態檔案建立了路由
app.use(express.static(path.join(__dirname, '/')))
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:3000');
});

webpack.config.js

webpack.config.js這個檔案npm start後在記憶體中構建的bundle.js
關於下面程式碼中webpack-hot-middleware/client?reload=true和其他引數請移步作者github，文件很詳細輕輕點這裡，記得回來

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

module.exports = {
  entry: [
    'eventsource-polyfill', //相容ie
    'webpack-hot-middleware/client?reload=true', //看上面
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  debug: true,
  devtool: 'source-map',
  plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
  ],
  module: {
    //loader自行新增
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      }
    ],
    postLoaders: [
      {
        test: /\.js$/,
        loaders: ['es3ify-loader']
      }
    ]
  }

};

webpack.config.prod.js

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

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }],
    postLoaders: [
      {
        test: /\.js$/,
        loaders: ['es3ify-loader']
      }
    ]
  }
};

專案地址輕輕點這裡