当 Babel 动态附加时，动态附加的 JSX 不会被 Babel Standalone 转译

Question

当 Babel 动态附加时，动态附加的 JSX 不会被 Babel Standalone 转译

Tom*_*Tom 2 javascript jsx reactjs babeljs react-dom

当 Babel Standalone 作为 SCRIPT 标签的 SRC 属性提供时，Babel Standalone 可用于动态附加的 JSX 代码。当使用 JavaScript 将其附加到 DOM 时，它不起作用。对于 React 库来说情况并非如此，当动态附加 React 库时，它可以与动态附加的 JSX 一起正常工作。

首先，这是 JSX 文件 (react.jsx)：

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

Run Code Online (Sandbox Code Playgroud)

接下来，这是使用它的 HTML。请注意，React 库和 JSX 文件是动态添加的；这工作正常。但是，Babel Standalone 仅在将 Babel Standalone 添加为 SCRIPT 元素的 SRC 时才转译 JSX，而不是在使用附加 JS/JSX 其余部分的相同 JavaScript 进行附加时转译。通过重新删除一个 Babel Standalone 调用并取消重新删除另一个来在两种状态之间切换。我想动态附加 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tom*_*Tom 5

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'));
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

因此，上面编辑后可以工作的完整代码是：

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，5 月前
查看次数：	1130 次
最近记录：	7 年，5 月前