将 ES 模块与 babel-standalone 一起使用

Question

将 ES 模块与 babel-standalone 一起使用

Geo*_*mar 6 javascript reactjs umd babeljs es6-modules

引用 babel 文档https://babeljs.io/docs/en/babel-standalone#usage：

“如果您想使用浏览器对 ES 模块的本机支持，通常需要在脚本标记上设置 type="module" 属性。对于 @babel/standalone，请设置 data-type="module" 属性”

但出于某种原因，当包含我的主 index.js 文件（使用 import 导入其他 js / jsx 文件）时，babel 似乎正在将我的 import 语句转换为 require 语句，因为我收到了 ReferenceError: require is not Defined。

我发现解决这个问题的唯一方法是使用transform-modules-umd插件并将我的所有js文件作为脚本包含在内。不确定这是否是 data-type="module" 不起作用的错误，或者我是否遗漏了某些内容。

这些是我在index.html 中的脚本标签

<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/babel.min.js"></script>

<script src="index.js" type="text/babel" data-type="module"></script>

Run Code Online (Sandbox Code Playgroud)

谢谢您的帮助

Answer 1

Duk*_*gal 5

为了（我）将来的参考，这里有一个完整的工作示例。

您只需将下面的代码放入 index.html 并在 Web 浏览器中运行它，您就会拥有一个使用 JSX 的工作 React 应用程序。

来源： https: //codesandbox.io/s/dikoh?file =/index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Static Template</title>
    </head>
    <body>
      <div id="main"></div>
  
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel" data-presets="react" data-type="module">
        import {
          ChakraProvider,
          Box,
          Text
        } from "https://cdn.skypack.dev/@chakra-ui/react";
        import React, { useRef } from "https://cdn.skypack.dev/react";
        import ReactDOM from "https://cdn.skypack.dev/react-dom";
  
        const MyText = ({ color, ...props }) => {
          return <Text fontWeight="bold" as="span" {...props} />;
        };
  
        function Foo() {
          return (
            <div>
              Foo
            </div>
          );
        }
  
        function App() {
          return (
            <Box>
              Hello <MyText>Skypack</MyText>
              <Foo/>
            </Box>
          );
        }
  
        ReactDOM.render(
          <ChakraProvider>
            <App />
          </ChakraProvider>,
          document.getElementById("main")
        );
      </script>
    </body>
  </html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Geo*_*mar 2

Amareis 在 babel 的 github 页面上回答了我的问题：https://github.com/babel/babel/discussions/12059

问题是 babel 不会转译通过 ES 模块导入的模块，它们必须显式包含为脚本，并将“type”设置为“text/babel”。所以index.js脚本中通过ES模块导入的JSX文件是在index.js被babel转译之后导入的，而不是本身转译的。

还建议使用服务工作者获取并执行我的脚本以进行开发。babel-standalone 在获取后对它们进行转换

归档时间：	5 年，5 月前
查看次数：	4373 次
最近记录：	4 年，6 月前