Если вы читали некоторые из моих предыдущих сообщений, то, возможно, уже знаете, что я большой поклонник Pnp для SharePoint. Использование JavaScript в SharePoint становится все более важным за последние несколько лет, что со временем побудило меня перейти на новый синтаксис ES6.
Как только вы начнете использовать ES6 и базовую библиотеку PNP JS, время разработки может значительно сократиться. Это потому, что есть несколько отличных методов и ярлыков, которые являются результатом сочетания обеих технологий.
Единственная экономия времени, которую я часто использую повторно, - это стрелочные функции из ES6 и вызовы стиля Promise из ядра PNP.
Они отлично работают в Chrome, Firefox и Edge, но для обратной совместимости с IE11 нам нужно будет добавить еще несколько библиотек и внести дополнительные изменения.
Слон в комнате
Как вы, наверное, знаете, функции стрелок не поддерживаются IE, поэтому, если мы хотим использовать тот же код в этом браузере, у нас есть два варианта:
- Мы переписываем все эти стрелочные функции в предыдущий метод function (), который работает, но контрпродуктивен.
- Мы используем Babel для компиляции нашего кода ES6 в допустимые функции / методы, понятные IE11.
Я предпочитаю второй вариант, так как он не требует переписывания основного кода. Итак, если у вас раньше было что-то подобное в вашем коде:
‹Тип сценария =” текст / javascript ”src =” scripts.js ”/›
Затем вам нужно будет преобразовать его в следующее:
‹Тип скрипта =” https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js ”/›
‹Тип сценария =” text / babel ”src =” scripts.js ”/›
Обратите внимание, что мы используем АВТОНОМНУЮ версию Babel, поскольку нам не нужны другие зависимости при работе в SharePoint. Кроме того, обратите внимание, что мы изменили тип «text / javascript» на «text / label» из нашего основного ресурса JS.
Я по-прежнему получаю ошибки
Вторая часть исправления немного проще, поскольку требует объединения трех JS-библиотек, которые помогут IE справиться с функциями Promise из PNP Core JS. Просто добавьте ниже:
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.0/es6-promise.min.js ›‹/script›
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js ›‹/script›
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js ›‹/script›
Работает в IE
Отлично, теперь вы должны увидеть, как ваш скрипт работает в IE! А как насчет других браузеров? Что ж, нам нужно будет оптимизировать вызов скриптов, чтобы мы не вызывали все ресурсы, которые нам не нужны.
Для этого мы собираемся написать условный оператор для проверки навигатора и обнаружения IE11. Если браузер действительно IE11, то мы получим автономный скрипт Babel, скрипт Promise, poyfill, fetch и наш script.js в типе Babel.
Если браузер не IE, то нам просто нужно загрузить обычный script.js.
Вот как будет выглядеть код:
Или скопируйте отсюда:
‹! - Загрузить jquery и pnp →
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js ›‹/script›
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js ›‹/script›
‹Тип сценария =” текст / javascript ”›
if (navigator.userAgent.match (/ Trident \ / 7 \ ./)) {
$ .getScript (‘https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js ');
$ .getScript (‘https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.0/es6-promise.min.js ');
$ .getScript («https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js»)
$ .getScript (‘https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js ')
document.write (‘‹ script type = ”text / babel” src = ”script.js” / ›’)
} еще {
$ .getScript ("script.js");
***
Здесь, в NIFTIT, от консультирования по Office 365 до решений SharePoint, мы можем обрабатывать проекты любого размера и сложности. Мы следуем отраслевым стандартам и лучшим практикам для создания решений мирового класса. Узнайте больше о нашей поддержке Office 365 здесь!
