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

【问题标题】：How to perform import/export in client-side React JSX using Babel-Standalone如何使用 Babel-Standalone 在客户端 React JSX 中执行导入/导出
【发布时间】：2019-05-27 02:27:00
【问题描述】：

我正在使用 Babel-Standalone 在 React 应用程序中使用 JSX，而不使用 NPM。 Babel 显然将“import”语句转换为“require”语句；导入“require.js”和其他依赖项以使这项工作产生更多错误。

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

<!doctype html>
<html lang="en-us">
<head>
    <title>React JSX Babel-Standalone Import/Export Problem</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

// See MyExport.js text below this SCRIPT
// Goal: to employ <MyExport /> in the return of App.

// import MyExport from "./MyExport";

const App = () => {
    return (
        <div>Hello</div>
    );
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>

<!-- MyExport.js:
const MyExport = () => {
    return (
        <div>MyExport</div>
    );
};
export default MyExport;
-->

</body>
</html>

【问题讨论】：

标签： javascript reactjs export jsx babeljs

【解决方案1】：

Babel 不是模块捆绑器或模块系统实现，babel 只是一个转译器，用于提供对浏览器或节点不支持的最新 JS 功能的访问。如果您想在没有任何第三方（如 webpack、rollup 等）的情况下使用 ES 模块，请查看https://developers.google.com/web/fundamentals/primers/modules。

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

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

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

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

通过脚本标签的JS模块仅在最新版本的主要浏览器中支持：https://caniuse.com/#feat=es6-module

另外，您需要解决 babel-standalone 需要您的脚本标签为 text/babel 编辑： 解决方法是使用 data-type="module" 标签以及作为 type="text/babel" 标签：https://babeljs.io/docs/en/babel-standalone#usage

【讨论】：

【解决方案2】：

有一个解决方案：（1）包含导出的JSX脚本必须与其他元素一起包含在SCRIPT元素中；它不能简单地被另一个脚本引用。 (2) 该 JSX 脚本和从中导入的 JSX 脚本都必须具有自定义属性 data-plugins="transform-es2015-modules-umd" 以及预期的属性 type="text/babel"。运行以下 HTML，修改问题中提供的内容，提供解决方案（您必须在本地创建 MyExport.js 才能运行它）：

<!doctype html>
<html lang="en-us">
<head>
    <title>React JSX Babel-Standalone Import/Export Problem</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyExport.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel">
import MyExport from "./MyExport";
const App = () => {
    return (
        <MyExport/>
    );
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>

<!-- MyExport.js:
const MyExport = () => {
    return (
        <div>MyExport element is imported!</div>
    );
};
export default MyExport;
-->

</body>
</html>

我希望这对其他人有帮助。

【讨论】：

这在 babel-standalone v6 中有效。它在 babel-standalone v7 中不起作用，它不知道 'transform-es2015-modules-umd' 是什么。
经过数小时的搜索，这个答案帮助我让它工作。谢谢！
@EvanThompson 和 babeljs.io/blog/2017/12/27/…
@Tom 谢谢，我遇到了同样的问题，它对我有用。但是，如果我想将另一个子组件导入 MyExport.js 本身，那么它就行不通了！！有什么想法吗？

【解决方案3】：

你应该首先包含所有需要的组件文件，然后运行 app js 文件示例：

<div id="root-react"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></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"));

subcomponent.js 内容：

"use strict";

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

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

customElements.define('subcomponent', SubComponent);

html文件中包含的文件应该是：

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

希望它对某人有所帮助。 CodePen demo

【讨论】：

但您的示例不包括使用“import”