如何使脚本类型既是文本/babel 又是模块？答案

【问题标题】：How to make script type both text/babel and module?如何使脚本类型既是文本/babel 又是模块？
【发布时间】：2019-01-03 07:40:39
【问题描述】：

因为我没有包含 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>

【问题讨论】：

我也有同样的问题。你最后做了什么？
Follow this question 它应该回答你的问题

标签： javascript reactjs babeljs

【解决方案1】：

2021 年 7 月更新

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

原答案

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

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

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

在这里查看更多 Babel standalone

【讨论】：

【解决方案2】：

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

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

我发现在不使用任何构建工具的情况下将原生浏览器模块支持和 JSX 的浏览器内 Babel 结合起来的唯一方法是……这是一个相当肮脏的 hack，它使用 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;

【讨论】：

【解决方案3】：

如docs 中所述，已添加到：v7.10.0。

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

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

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

【讨论】：

【解决方案4】：

您可能更喜欢使用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>

【讨论】：