Динамически добавляемый JSX не транслируется Babel Standalone при динамическом добавлении Babel - PullRequest
Новая
       21

Динамически добавляемый JSX не транслируется Babel Standalone при динамическом добавлении Babel

0 голосов
/ 05 декабря 2018

Babel Standalone работает с динамически добавляемым кодом JSX, когда Babel Standalone предоставляется в качестве атрибута SRC тега SCRIPT.Он не работает, когда он добавляется в DOM с помощью JavaScript.Это не относится к библиотекам React, которые прекрасно работают с динамически добавляемым JSX, когда библиотеки React добавляются динамически.

Во-первых, вот файл JSX (act.jsx): 

class HelloMessage extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}
ReactDOM.render(<HelloMessage/>, document.getElementById('app'));

Далее приведен HTML-код, который его использует.Обратите внимание, что библиотеки React и файл JSX добавляются динамически;это работает правильно.Однако Babel Standalone переносит JSX только тогда, когда Babel Standalone добавляется в качестве SRC элемента SCRIPT, а не когда он добавляется с использованием того же JavaScript, который добавляет остальную часть JS / JSX.Переключайтесь между двумя состояниями, вызывая один Вавилонский отдельный вызов и не напоминая другой.Я хочу добавить Babel Standalone динамически ... в чем проблема? 

<!doctype html>
<html>
<head>
    <title>Inscrutable Babel Problem</title>
</head>
<body>
    <div>
        <p>Babel works only when added as a src of a SCRIPT element; it fails when the script is appended dynamically. HELLO will display below when it works.</p>
    </div>
    <div id=app></div>
<script>
function loadScript(src, type) {
    var script = document.createElement('script');
    script.src = src;
    if (type) {
        script.type = type;
    }
    script.async = false;
    document.body.appendChild(script);
}
loadScript('https://unpkg.com/react@16/umd/react.production.min.js');
loadScript('https://unpkg.com/react-dom@16/umd/react-dom.production.min.js');

// You'll need to place the REACT.JSX code above in a locally hosted file to reproduce the results: 
loadScript('react.jsx', 'text/babel');

// To toggle: rem the following line and un-rem the corresponding SCRIPT tag below
loadScript('https://unpkg.com/babel-standalone@6/babel.min.js');

</script>

<!-- To toggle: un-rem the the following SCRIPT tag and rem the last loadScript() call in the JavaScript above -->
<!--
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-->

</body>
</html>

1 Ответ

0 голосов
/ 08 декабря 2018

babel-standalone прослушивает событие DOMContentLoaded, которое вызывает добавление переносимой версии любых блоков сценариев JSX к HEAD.В конце загрузки DOM, если HEAD не имеет SCRIPT, запустите событие DOMContentLoaded снова;ниже приведен кодовый блок, который делает свое дело.

Примечание: это исправление ошибки, специфичное для babel-standalone;если какая-либо другая используемая библиотека также отвечает на DOMContentLoaded, ее код может выполняться второй раз, что может быть нежелательно. 

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        if (document.querySelectorAll('head script').length === 0) {
            window.dispatchEvent(new Event('DOMContentLoaded'));
        }
    }
}

Полный приведенный выше код, отредактированный для работы, поэтому: 

<!doctype html>
<html>
<head>
    <title>Inscrutable Babel Problem</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <p>Babel runs when the DOMContentLoaded event is fired. HELLO will display below when it works.</p>
    </div>
    <div id=app></div>
<script>
function loadScript(src, type) {
    var script = document.createElement('script');
    script.src = src;
    if (type) {
            script.type = type;
    }
    script.async = false;
    document.body.appendChild(script);
}
loadScript('https://unpkg.com/react@16/umd/react.production.min.js');
loadScript('https://unpkg.com/react-dom@16/umd/react-dom.production.min.js');
loadScript('javascript/react.jsx', 'text/babel');
loadScript('https://unpkg.com/babel-standalone@6/babel.min.js');

// Listen for completion of DOM loading; if no SCRIPT element has been added
// to the HEAD, fire the DOMContentLoaded event again:
document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        if (document.querySelectorAll('head script').length === 0) {
            window.dispatchEvent(new Event('DOMContentLoaded'));
        }
    }
}

</script>
</body>
</html>
...