在Babel Standalone中使用导入进行React

x33g5p2x 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(298)

我尝试在Babel独立运行React，并使用从附近文件导入。
我不喜欢使用捆绑器，也不喜欢使用非导入/导出的解决方案。
下面是问题的一个简明示例：
index.html:

<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.19.3/babel.js"></script>
  </head>
  <body>
    <div id="root-box"></div>
    <script type="text/babel" data-type="module" data-presets="react">
      import { Something } from "./Something.js";
      ReactDOM.createRoot(document.getElementById("root-box")).render(
        <Something />
      );
    </script>
  </body>
</html>

Something.js

export const Something = () => {
  return <div>Hello</div>
}

产生的错误为：Uncaught SyntaxError: Unexpected token '<' (at Something.js:2:10)，这意味着Babel已经获得了另一个文件，但没有传播它。

babeljs

来源：https://stackoverflow.com/questions/73911035/using-import-in-babel-standalone-for-react

1条答案

按热度按时间

ldioqlga1#

我认为这里有两个问题。第一，你没有在Babel编译的脚本源代码中包含Something.js。第二，UMD模块转换没有被应用，阻止了导入的正确工作。因此，你的代码的工作版本看起来像这样。

<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.19.3/babel.js"></script>
    <script data-plugins="transform-modules-umd" type="text/babel" data-presets="react" data-type="module" src="Something.js"></script>
  </head>
  <body>
    <div id="root-box"></div>
    <script data-plugins="transform-modules-umd" type="text/babel" data-presets="react" data-type="module">
      import { Something } from "./Something.js";
      ReactDOM.createRoot(document.getElementById("root-box")).render(
        <Something />
      );
    </script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-08

我来回答

在Babel Standalone中使用导入进行React

1条答案

相关问题

热门标签

最新问答