Question

我正在使用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>

Answer 1

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

Answer 2

Babel不是模块捆绑器或模块系统实现，babel只是一个编译器，用于提供对浏览器或节点不支持的最新JS功能的访问。如果您想在没有第三方（例如webpack，汇总等）的情况下使用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

Answer 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>

希望这对其他人有帮助。

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

3 个答案: