脚手架在 IE8 下无法运行 about antd-init

[rockallite]

小结一下，使用 antd-init v1.1.2 生成的脚手架，需要作以下改动才可以在 IE8 下运行：

1. index.html 需要引入 polyfill：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.9.1/polyfill.min.js"></script>
   <script src="common.js"></script>
   <script src="index.js"></script>

   或者运行 npm i --save babel-polyfill 安装依赖，然后在 entries 文件最开头 import "babel-polyfill"。

2. 生成的 package.json 中 dependencies 一节，将以下的依赖：

   "isomorphic-fetch": "^2.2.1",
   "js-cookie": "^2.1.1",
   "react": "^15.0.2",
   "react-dom": "^15.0.2",
   "react-redux": "4.4.x",
   "react-router": "^2.0.1",
   "react-router-redux": "^4.0.1",
   "redux": "^3.5.2",
   "redux-actions": "0.9.x",
   "redux-saga": "^0.10.4"
   

   修改为：

   "fetch-ie8": "^1.4.2",
   "js-cookie": "^2.1.1",
   "react": "0.14.x",
   "react-dom": "0.14.x",
   "react-redux": "4.4.x",
   "react-router": "2.3.x",
   "react-router-redux": "4.0.x",
   "redux": "^3.5.2",
   "redux-actions": "0.9.x",
   "redux-saga-ie8": "0.10.x",
   

   保存后运行 npm i 重新安装依赖。

3. 文件中相应的引用也需要更改：

   • entries/index.js

     // import { syncHistoryWithStore, routerReducer as routing } from 'react-router-redux';
     // https://github.com/xcatliu/react-ie8/issues/26
     import syncHistoryWithStore from 'react-router-redux/lib/sync';
     import { routerReducer as routing } from 'react-router-redux/lib/reducer';

   • sagas/index.js

     // import { fork } from 'redux-saga/effects';
     import { fork } from 'redux-saga-ie8/effects';

   • sagas/SagaManager.js

     // import { take, fork, cancel } from 'redux-saga/effects';
     import { take, fork, cancel } from 'redux-saga-ie8/effects';

   • sagas/todos.js

     // import { takeLatest } from 'redux-saga';
     import { takeLatest } from 'redux-saga-ie8';
     // import { take, call, put, fork, cancel } from 'redux-saga/effects';
     import { take, call, put, fork, cancel } from 'redux-saga-ie8/effects';

   • services/xFetch.js

     // import fetch from 'isomorphic-fetch';
     import 'fetch-ie8';

4. 还有一些兼容 IE8 必须的小改动：

   • services/todos.js

     import xFetch from './xFetch';
     
     // export async function getAll() {
     // 用了 async 关键字 IE8 会出错
     export function getAll() {
       return xFetch('/api/todos');
     }

5. 另外参考 antd-init 的使用说明：

   • 在 webpack.config.js 中开启 es3ify-loader：

     // Enable this if you have to support IE8.
     - // webpackConfig.module.loaders.unshift({
     - //   test: /\.jsx?$/,
     - //   loader: 'es3ify-loader',
     - // });
     + webpackConfig.module.loaders.unshift({
     +   test: /\.jsx?$/,
     +   loader: 'es3ify-loader',
     + });

   • 在 package.json 的 scripts 一节中添加兼容 IE8 的服务器命令：

     "start": "dora --plugins \"proxy,webpack,webpack-hmr,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
     + "start:ie8": "dora --plugins \"proxy,webpack,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",

     然后用 npm run start:ie8 运行服务器。

6. 至此脚手架已可以在 IE8 下运行了，但仍有不完善之处。脚手架默认启用 react-router 的 browserHistory，可惜 IE8/9 不支持，这时 react-router 会以整页刷新来代替不刷新网页修改地址栏 URL。因此点击脚手架网页左侧的链接时，起不到实时过滤的效果（在改变了勾选项后看得更清楚）。所以要在 IE8 下有更好的用户体验，请改用 hashHistory：

   • entries/index.js

     // import { browserHistory } from 'react-router';
     import { hashHistory } from 'react-router';
     
     // const history = syncHistoryWithStore(browserHistory, store);
     const history = syncHistoryWithStore(hashHistory, store);

[sorrycc]

https://github.com/ant-design/antd-init/blob/master/boilerplates/plain-react/webpack.config.js#L15-L19
这行注释开启了吗?

[afc163]

开启了。

报的是调试工具里引入的错。

[sorrycc]

试过这样改之后可以：

1. https://github.com/ant-design/antd-init/blob/master/boilerplates/plain-react/webpack.config.js#L15-L19
   开启这一行。
2. react-router 换成 2.3
3. react 和 react-dom 换成 0.14
4. 修改 package.json，删除 hmr 插件

代价好大。。

[sorrycc]

[afc163]

好，给个 hint 就行...