Javascript 如何使用Babel Standalone在客户端React JSX中执行导入/导出

我使用Babel Standalone在React应用程序中使用JSX，而不使用NPM。巴贝尔显然将“import”语句翻译成“require”语句；导入“require.js”和其他依赖项以进行此工作会产生更多错误

当然，必须有一种在客户端JSX上下文中执行导入/导出的简单方法。请告知（此处不寻求节点/NPM/Webpack解决方案；寻求适当库的CDN和重写导入语句等）

React JSX Babel独立导入/导出问题
//请参阅此脚本下面的MyExport.js文本
//目标：在应用程序返回中使用。
//从“/MyExport”导入MyExport；
常量应用=（）=>{
返回(
你好
);
};
ReactDOM.render（，document.querySelector（“#root”）；

Babel不是一个模块绑定器或模块系统实现，Babel只是一个传输器，提供对浏览器或节点不支持的最新JS功能的访问。 如果您想在没有任何第三方（如webpack、rollup等）的情况下使用ES模块，请查看

您应该能够执行以下操作：

<script type="module">
  import MyExport from "./url/to/MyExport.mjs";

  const App = () => {
    return (
        <div>Hello</div>
    );
  };

  ReactDOM.render(<App />, document.querySelector("#root"));
</script>

从“/url/to/MyExport.mjs”导入MyExport；
常量应用=（）=>{
返回(
你好
);
};
ReactDOM.render(

此外，您还需要解决babel standalone需要脚本标记为
text/babel
编辑：这一问题。解决方法是使用data type=“module”标记以及type=“text/babel”标记：
有一个解决方案：（1）包含导出的JSX脚本必须与其他脚本一起包含在
script
元素中；它不能简单地由另一个脚本引用（2）JSX脚本和从中导入的JSX脚本都必须具有自定义属性
data plugins=“transform-es2015-modules-umd”
以及预期的属性
type=“text/babel”
。运行以下HTML，这是对问题中提供的内容的修改，它提供了解决方案（您必须在本地创建
MyExport.js
才能运行它）：


React JSX Babel独立导入/导出问题
从“/MyExport”导入MyExport；
常量应用=（）=>{
返回(
);
};
ReactDOM.render（，document.querySelector（“#root”）；

我希望这对其他人有所帮助。
您应该首先包含所有需要的组件文件，然后运行app js文件
例如：



文件的树类似于：

<script type="module">
  import MyExport from "./url/to/MyExport.mjs";

  const App = () => {
    return (
        <div>Hello</div>
    );
  };

  ReactDOM.render(<App />, document.querySelector("#root"));
</script>

js/app.js

js/subcomponent.js

例如，app.js内容是：

"use strict";

class MainReact extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div>
            <strong>app.js</strong> is loaded<br/>
            <SubComponent />
        </div>
    )
  }
}

ReactDOM.render(<MainReact />, document.getElementById("root-react"));

“严格使用”；
类MainReact扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
app.js已加载

)
}
}
render（，document.getElementById（“根react”）；

subcomponent.js内容：

"use strict";

class SubComponent extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
          <span> SubComponent-is-working </span>
        )              
    }
}

customElements.define('subcomponent', SubComponent);

“严格使用”；
类子组件扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
子组件正在工作
)              
}
}
自定义元素。定义（'子组件'，子组件）；

html文件中包含的文件应为：

<script type="text/babel" src="js/subcomponent.js"></script>
<script type="text/babel" src="js/app.js"></script>



希望它能帮助别人。
这在babel standalone v6中起作用。在babel standalone v7中不起作用，因为它不知道什么是“transform-es2015-modules-umd”。经过几个小时的搜索，这个答案帮助我实现了。谢谢！@EvanThompson with@Tom Thank，我也遇到了同样的问题，它对我有效。但是如果我想将另一个子组件导入MyEx中port.js本身，那么它就不工作了！！有什么想法吗？
"use strict";

class SubComponent extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
          <span> SubComponent-is-working </span>
        )              
    }
}

customElements.define('subcomponent', SubComponent);

<script type="text/babel" src="js/subcomponent.js"></script>
<script type="text/babel" src="js/app.js"></script>