如何使脚本同时键入文本/小标题和模块？

Question

因为我还没有包含JSX，所以它能很好地工作，但是当我用替换脚本类型时text/babel，它就无法工作，因为模块无法加载。browser.jsBabel编译器。

在这里... JSX仅在我用替换脚本类型时起作用，text/babel但问题是模块无法加载，因为脚本不是模块。知道如何使其与JSX一起使用吗？

<div id="root">

</div>
<script type="module">
    import  './react.min.js';
    import  './react-dom.min.js';
    import  './browser.js';
    class Hello extends React.Component {
        render() {
            return React.createElement('div', null, `Hello ${this.props.toWhat}`);
        }
    }
    ReactDOM.render(
        React.createElement(Hello, {toWhat: 'World'}, null),
        document.getElementById('root')
    );
</script>

Answer 1

正如文档中提到的，它被添加到： 中v7.10.0。

如果您想使用浏览器对 ES 模块的本机支持，通常需要type="module"在脚本标记上设置一个属性。

使用 @babel/standalone，设置一个data-type="module"属性，如下所示：

<script type="text/babel" data-type="module">

Answer 2

2021 年 7 月更新

根据mh sattarian的回答，您现在不需要data-plugins="transform-es2015-modules-umd"使用本机 es6 模块的导入/导出等。相反，您只需添加data-type="module"

原答案

以防万一有人来这里寻找答案

babel Standalone 支持数据插件和数据预设

<script data-plugins="transform-es2015-modules-umd" type="text/babel">

在这里查看更多 Babel 独立版

Answer 3

您可能更喜欢使用别名createElement。这种方式对于引擎来说速度更快。例如使用h或e。

const { createElement: h } = React;

const App = () => {
   return h('div', {}, 'hello!!'); 
}

否则，可以使用@babel/standalone模块，请在此处查看更多信息https://babeljs.io/docs/en/next/babel-standalone.html。

const { createElement: h } = React;

const App = () => {
   return h('div', {}, 'hello!!'); 
}