Question

它完美运行是因为我没有包含JSX，但是当我用text/babel替换脚本类型时，由于模块无法加载，所以它不起作用。 browser.js Babel编译器。

在这里... 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

您可能更愿意为createElement使用别名。这种方式对于引擎来说更快。例如，使用h或e。

const { createElement: h } = React;

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

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

<div id="app"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const { render } = ReactDOM;

const App = () => {
    return <div>hello!!</div>
}

render(<App />, document.getElementById('app'));
</script>

Answer 2

我认为问题是，是否可以同时使用具有两种或更多种类型的脚本标签（例如，type="module, txt/babel"之类的东西）。据我所知，答案是否定的。

JonDotsoy的答案有助于减少一遍又一遍地键入React.createElement，但是即使使用这样的“可变快捷键”，当使用带有嵌套元素的较大模板时，它也不如JSX舒适，因为h('div', {}, 'hello!!')...难以维护在这种情况下。

我发现不使用任何构建工具就将本机浏览器模块支持和浏览器内Babel结合起来而不使用任何构建工具的唯一方法是……使用eval且不应该用于生产应用程序的相当脏的技巧：

index.html

<body>

    <div id="app"></div>


    <!-- Scripts ------- -->
    <script src="vendor/js/babel.min.js"></script>
    <script src="vendor/js/react.development.js"></script>
    <script src="vendor/js/react-dom.development.js"></script>
    <script src="app/app.js" type="module"></script>

</body>

app / app.js

import ComponentOne from "./ComponentOne.js";


let template = `
<div>
    <h1>Heading</h1>
    <hr />
    <ComponentOne msg="MsgText-ComponentOne" />
</div>
`;


const App = () => {
    return (
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};


ReactDOM.render(
    React.createElement(App, null),
    document.getElementById("app")
);

app / ComponentOne.js

import ComponentTwo from "./ComponentTwo.js";


let template = `
<div>
    <h2>This is ComponentOne</h2>
    <p key="2">Property "msg" content: {props.msg}</p>

    <ComponentTwo msg="MsgText-ComponentTwo" />
</div>
`;


const ComponentOne = (props) => {
    return(
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};

export default ComponentOne;

app / ComponentTwo.js

let template = `
<div>
    <h2>This is ComponentTwo</h2>
    <p key="2">Property "msg" content: {props.msg}</p>
</div>
`;


const ComponentTwo = (props) => {
    return(
        eval(Babel.transform(template, { presets: ['es2017', 'react'] }).code)
    );
};

export default ComponentTwo;

Answer 3

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

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

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

在此处查看更多 Babel standalone

Answer 4

如https://github.com/tweepy/tweepy/issues/859中所述，它被添加到v7.10.0中。

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

使用@ babel / standalone，改为设置data-type="module"属性，像这样：

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

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

4 个答案: