Путь к совместимости с IE

React.js

написать впереди

Недавно разработанный проект React должен быть повторно совместим с браузером IE, а минимальная совместимая версия IE — 10. Как совместимый Xiaobai, я очень нервничал. Теперь я подытожу проблемы, возникшие на пути совместимости и обучения, и напишу и поделюсь с вами, надеюсь, это будет полезно друзьям, которые это увидят, и вы также можете вносить предложения.

Базовая версия конфигурации этого проекта выглядит следующим образом:

"react": "^16.5.2",
"react-dom": "^16.5.2",

Статьи без стиля, совместимые с IE10

✅Ошибка страницы: Установить/сопоставить неопределенную проблему

Эта проблема упоминается в требованиях к среде JS на официальном сайте React.

React 16 依赖集合类型 Map 和 Set 。如果你要支持无法原生提供这些能力（例如 IE < 11）或实现不规范（例如 IE 11）的旧浏览器与设备，考虑在你的应用库中包含一个全局的 polyfill ，例如 core-js 或 babel-polyfill 。

Приведенное решение состоит в том, чтобы заранее ввести указанный полифилл в файле ввода:

import 'core-js/es/map';
import 'core-js/es/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

✅Ошибка страницы: Object.setPrototypeOf неопределенная проблема

Это проблема Object.setPrototypeOf, Object.setPrototypeOf говорит, что поддерживает IE9-11, но в исходниках реализовано только 11+. Для получения подробной информации см.GitHub.com/Paul MilanIncluded/О….

  1. Вы можете решить эту проблему, самостоятельно зарегистрировав метод API setPrototypeOf в Object.
(function() {
  Object.setPrototypeOf = Object.setPrototypeOf || ({__proto__: []} instanceof Array ? setProtoOf : mixinProperties);

  function setProtoOf(obj, proto) {
    obj.__proto__ = proto;
    return obj;
  }

  function mixinProperties(obj, proto) {
    for (const prop in proto) {
      if (!obj.hasOwnProperty(prop)) {
        obj[prop] = proto[prop];
      }
    }
    return obj;
  }
})();
  1. Вы можете ввести сторонний пакет setPrototypeOf, а затем написать в файле записи:
Object.setPrototypeOf = require('setprototypeof');

✅Ошибка страницы в IE10: объекты недействительны в качестве дочерних элементов React (найдено: объект с ключами {?typeof, type, key, ref, props, _owner}) Приложение не отображается.

Причина: Babel-Polyfill, реагирует, реагирует реагировать введение задач.

  1. Решение: Вы можете заставить контролировать их упаковку, чтобы ввести конфигурацию ввода в веб-пакет, обязательно заказать введение Babel-Polyfill первым.
...
entry: {
    babelPolyfill: 'babel-polyfill',
    app: 'src/index.js'
}
...
plugins: [
    new HtmlWebpackPlugin({
        inject: true,
        filename: 'static/index.html',
        template: path.resolve(process.cwd(), 'public', 'index.html'),
        chunks: ['polyfill', 'app'], // 在此控制他们的引入加载顺序
        chunksSortMode: 'manual',
    }),
]

🤔🤔🤔🤔Вопрос от Xiaobai️: Управляйте порядком вступления троих прямо в файле ввода. Не знаю, почему это не работает. Оставьте пока вопрос. Все, кто знает, могут оставить сообщение.

  1. Решение. Вы можете использовать CDN в файле шаблона index.html, чтобы сначала загрузить babel-polyfill.
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>

🍒Советы: 6.26.0 это номер версии babel-polyfill, который используется в моем проекте, вы можете использовать свой номер версии

✅Ошибка страницы: невозможно получить неопределенное или нулевое свойство "xxx"

Причина: используется атрибут xxx в объекте mou, но объект не получен и имеет значение null.

Решение: Найдите место, где сообщается об ошибке, оцените и обработайте объект.Только когда объект получает значение, будет использоваться атрибут xxx объекта.

✅Ошибка страницы: разрешен только один экземпляр babel-polyfill

Причина: в записи веб-пакета представлены несколько полифилов babel.

Обратите внимание: если babel-polyfill указан как в записи webpackp, так и в файле записи, webpack проигнорирует тот, который введен страницей при ее упаковке, поэтому вышеуказанная ошибка не будет вызвана.

Решение: проверьте конфигурацию записи webpack и удалите лишнее введение babel-polyfill.

✅Несовместимость React-intl в IE10, страница сообщает об ошибке: [react Intl] TheIntl APIs must be available in the runtime.

Причина: react-intl инкапсулирован на основе Intl, и у этих API есть проблемы с совместимостью в IE10.

Решение: добавить пакетное решение INTL POLYFILL

<!--在入口文件中引入包，会导致webpack打包的文件比较大-->
import 'intl';
import 'intl/locale-data/jsonp/en';
import 'date-time-format-timezone';

<!--第二种：在webpack entry 中加入-->
entry = {
  polyfill: [
    path.join(process.cwd(), './node_modules/intl'),
    path.join(process.cwd(), './node_modules/intl/locale-data/jsonp/en'),
    path.join(process.cwd(), './node_modules/date-time-format-timezone'),
  ],
}

Ссылаться на:GitHub.com/format is/hot…

IE10-совместимые стили

✅Проблема IE10 с переносом очень длинного текста

/*word-break: break-word;*/ IE10中不支持
word-break: break-all;

✅IE10 частично поддерживает flex layout, не пишите встроенный flex стиль, лучше писать его отдельно

Примечания

Наконец, обратите внимание на две небольшие проблемы, возникшие в процессе совместимости:

✅ проблемы с загрузкой

Для функции загрузки внешний интерфейс часто реализует функцию загрузки, создавая временный тег и нажимая:

const a = document.createElement('a');
a.href = getUrl;
a.click();
// 火狐浏览器
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);

В настоящее время, если это браузер Firefox, если тег a не добавлен в dom, возникнет проблема, связанная с тем, что щелчок нельзя щелкнуть, и тег a необходимо добавить к телу.

✅ Запрос интерфейса IE использует проблему с кешем

Эта проблема была обнаружена, потому что система всегда всплывала сразу после того, как мы вошли в систему. Но когда я открываю F12, я могу войти каждый раз.

Эта проблема очень волшебная.От первоначальной мысли, что информация cookie интерфейса входа не была доведена до подозрения, что пакет совместимости whatwg-fetch, запрошенный запросом на выборку, не был введен, пока передняя и задняя части не были расположены вместе и обнаружил, что логин использовал кеш предыдущего логина для возврата, результат все еще не вошел в систему.

Вывод: Если запрос интерфейса в IE не контролирует использование кеша, браузер может автоматически использовать кеш и возвращать результат последнего запроса, но если включить отладку по F12 и включить режим отладчика, IE не будет использовать кэш, обратите внимание на эту проблему. Если вы не хотите, чтобы запрос интерфейса использовал кеш, вы можете решить ее, добавив временные метки.

Категории