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

问题描述

它可以正常工作，因为我还没有包含JSX，但是当我用text/babel替换脚本类型时，它却无法工作，因为模块无法加载. browser.js Babel编译器.

It works perfectly because I haven't included JSX, but when I replace the script type with text/babel, it doesn't work because the module fails to load. browser.js the Babel compiler.

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

Here... JSX works only when i replace script type with text/babel but the problem is module fails to load since the script is not module. Any idea how make it work with 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>

推荐答案

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

Just in case if some one comes here looking for answer

独立的babel中支持数据插件和数据预设

There is a support for data-plugins and data-presets in babel standalone

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

在此处查看更多 Babel独立版

这篇关于如何使脚本同时键入文本/小标题和模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！