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

IT技术 javascript reactjs export jsx babeljs
2021-05-11 05:07:48

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

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

<!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>
3个回答

有一个解决方案： (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>

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

您应该首先包含所有需要的组件文件，然后运行 ​​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>

希望它可以帮助某人。 代码笔演示

Babel 不是module捆绑器或module系统实现，babel 只是一个转译器，用于提供对浏览器或节点不支持的最新 JS 功能的访问。如果您想在没有任何第三方（如 webpack、rollup 等）的情况下使用 ES module，请查看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 module：https : //caniuse.com/#feat=es6-module

此外，您需要解决 babel-standalone 需要text/babel 编辑脚本标签这一事实：解决方法是使用 data-type="module" 标签以及 type="text/babel" 标签：https： //babeljs.io/docs/en/babel-standalone#usage

其它你可能感兴趣的问题
上一篇如何让 Yup 执行多个自定义验证？ 下一篇Z 偏移不正确