Reactie

Это решение покажет вам, как использовать стек React в IE8, тогда вам не придётся менять технологический стек, когда клиент использует устаревший браузер. Оно использует ES6, Webpack, Babel, ESLint, Ant Design 1.x, React 16, Reach, Rematch и т. д. Смотрите Reactie Todo.

Shim & Polyfill

Выберите необходимые прокладки и полифиллы.

1. es5-shim: патч, который предоставляет все методы ES5, которые можно точно эмулировать для устаревшего браузера;
2. console-polyfill: полифил консоли браузера. Делает безопасным запуск console.log() и т.д.;
3. @babel/polyfill: патч эмулирует полную среду ES2015+;
4. es6-proxy-polyfill: прокси-полифил на основе ES3 поддерживает IE8, Node.js и т. д.;
5. es6-promise: полифил обещания ES6;
6. bluebird: полнофункциональная библиотека обещаний с непревзойденной производительностью;
7. fetch-ie8: JavaScript-полифил window.fetch, поддерживающий IE8;
8. fetch-polyfill2: полифил fetch, который поддерживает все основные браузеры, даже IE6, IE7, IE8;
9. html5shiv: эта библиотека позволяет использовать элементы секционирования HTML5 в устаревшем Internet Explorer и обеспечивает базовый стиль HTML5 для Internet Explorer 6–9, Safari 4.x (и iPhone 3.x) и Firefox 3.x;
10. matchmedia-polyfill: полифил для проверки применимости типа носителя CSS или медиазапроса;
11. Respond.js: быстрый и лёгкий полифил для запросов min/max-width CSS3 Media (для IE 6–8 и более).

Main Library

1. es5-shim: патч эмулирует среду ES5;
2. @babel/polyfill: патч эмулирует среду ES6+;
3. anujs: библиотека, похожая на React, поддерживает большинство функций React 16, хорошо работает в IE8, создана Shitou Nasami;
4. reach: библиотека маршрутизатора React. Я использую совместимую версию, предоставленную anujs, которая модифицирована для поддержки hashchange IE8;
5. rematch: менеджер состояний для React. Anujs также предоставил совместимую версию;
6. ant: React UI framework. Antd 1.x — это последняя версия, поддерживающая IE8.

Compile & Pack

1. Object.defineProperty: его нельзя эмулировать в IE8, вы не должны использовать этот метод;
2. ES Module: чтобы избежать преобразования модуля ES в Object.defineProperty, пресет @babel/preset-env должен быть настроен следующим образом;

{
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', {
        loose: true,
        modules: 'commonjs',
      }]
    ]
  }
}

3. Зарезервированные слова: используйте es3ify, es3ify-loader или UglifyJS для преобразования вашего кода;

// Config
[
  new UglifyJsPlugin({
    uglifyOptions: {
      ie8: true,
      ...
    }
  })
]

// Before
var obj = { **Создание псевдонимов для упрощения импорта или требования определённых модулей**

*Модуль псевдонима:* создавайте псевдонимы для более простого импорта или запроса определённых модулей, например, используя anujs вместо React.
```javascript
// Config
{
  resolve: {
    alias: {
      'react': 'anujs/dist/ReactIE',
      'react-dom': 'anujs/dist/ReactIE',
      ...
    }
  }
}

// Code
import React from 'react'; // фактически загружен anujs

Решение проблем с ошибками

Ссылка

1. react-ie8