Я пытаюсь заставить веб-компоненты и HTML-импорт работать в Firefox и IE.
Я следовал инструкциям для веб-компонентов GitHub repo , установил файлы через npm и включил их в заголовок моего документа.
У меня есть собственный скрипт, который вызывается в теле документа.
В Firefox, полифилл загружается динамически (синхронно), но преобразует тег сценария в теле из:
<script type="module" src="./src/scripts/init.js"></script>
до
<script src="/components/requirejs/require.js"></script>
<script>require(["./src/scripts/init.js"]);</script>
и я получаю следующую ошибку:
ReferenceError: require is not defined.
Я также попытался выполнить этот ответ StackOverflow и скачал полифиллы отдельно:
(примечание: желательно ли копировать / вставлять необработанный код из файла репозитория? Я не знаю другого способа сделать это. Я также нахожу это очень странным на самом деле поиск нужного файла иногда файл находится в корневой папке, иногда в «src». Я что-то упустил?)
Я упорядочиваю файлы в head примерно так:
<!-- <script src="src/scripts/helper/web-components-polyfill.js"></script> -->
<script type="text/javascript" src="src/scripts/helper/html-imports-polyfill.js"></script>
<script type="text/javascript" src="src/scripts/helper/custom-element-polyfill.js"></script>
Примечание. Я закомментирую полифил «общих» веб-компонентов, поскольку пытаюсь следовать советам справочного вопроса.
В Firefox и IE я получаю ту же ошибку: require is not defined. Я получаю это дополнительное совершенство в Firefox:
Я также пытался использовать функцию обнаружения функций для загрузки полифилов в соответствии с WebComponents.org :
<script type="text/javascript">
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
console.log('loading the polyfills');
var e = document.createElement('script');
e.type = "text/javascript";
e.src = './src/scripts/helper/html-imports-polyfill.js';
document.head.appendChild(e);
var f = document.createElement('script');
f.src = './src/scripts/helper/custom-elements-polyfill.js';
document.head.appendChild(f);
}
})();
</script>
Опять я получаю похожий набор ошибок:
Сценарий, запускающий приложение, init.js, который я вызываю после «загрузки» поли-заливок, настроен на импорт фрагментов HTML и добавление их в документ. Вот функция, которую я использую для этого:
/**
* Dynamically imports HTML into the Main file
*
* @param {String} path The path to the document to import
* @return {[type]} [description]
*/
function _importHTML(path) {
console.log('importHTML called', path);
let link = document.createElement('link');
link.rel = 'import';
link.href = path;
link.onload = (e) => {
// console.log('Successfully loaded', e.target.href);
}
link.onerror = (e) => {
console.log('Error loading', e.target.href);
}
document.head.appendChild(link);
}
Само собой разумеется, но в Chrome все отлично работает.
Пожалуйста, помогите! : D