Я захватил веб-сайт V2 Docusaurus .
Одной из особенностей нашего веб-сайта является то, что нам нужно загрузить office. js и css -vars-ponyfill.min. js, и Запустите некоторые функции в патчах . js в самом начале. Поэтому предыдущий разработчик решил использовать следующий подход.
На каждой .mdx.md
странице он обернул содержимое компонентом MainWrapper
:
<MainWrapper>
... ...
Real content
... ...
</MainWrapper>
MainWrapper/index.js
определяется как следует
import React from 'react';
import Head from '@docusaurus/Head';
function MainWrapper(props) {
return (<>
<Head>
<script
src="/lib/patches.js"
onload="(function(){console.log('patches.js has been fully loaded')}).call(this)" >
</script>
<script async defer
src='https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js'
onload="(function(){console.log('css-vars-ponyfill.min.js has been fully loaded'); onCssVarsPonyfillLoad();}).call(this)">
</script>
<script async defer
src='https://appsforoffice.microsoft.com/lib/1/hosted/office.js'
onload="(function(){console.log('office.js has been fully loaded'); onOfficejsLoad();}).call(this)">
</script>
</Head>
{props.children}
</>)
}
export default MainWrapper;
lib/Patches.js
содержит реальные операции:
var pushStateRef = history.pushState;
var replaceStateRef = history.replaceState;
console.log("already inside patches.js")
console.log("history.pushSate and replaceState have been saved")
function patch() {
if (!history.pushState) {
history.pushState = pushStateRef;
history.replaceState = replaceStateRef;
console.log("history.pushState and replaceState have been set back")
};
}
... ...
function onCssVarsPonyfillLoad() {
console.log("already inside patches.js > onCssVarsPonyfillLoad()")
... ...
}
function onOfficejsLoad() {
Office.onReady(function () {
console.log("already inside Office.onReady");
patch();
})
}
Мои тесты показывают, что иногда эта реализация может обеспечить загрузку patches.js
до office.js
и css-vars-ponyfill.min.js
как <script async defer
до. Однако иногда этот порядок не может быть обеспечен:
@docusarus/Head
использует react-helmet
. Кто-нибудь знает, как исправить эту проблему порядка загрузки? Я хочу загрузить patches.js
, прежде чем что-либо еще, есть ли обходной путь?