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

Question

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

"If you want to use your browser's native support for ES Modules, you'd normally need to set a type="module" attribute on your script tag. With @babel/standalone, set a data-type="module" attribute instead"

但是，由于某种原因，当包含我的主 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>

谢谢您的帮助

Answer 1

Amareis 在 babel 的 github 页面上回答了我的问题:https://github.com/babel/babel/discussions/12059
问题是 babel 不会转译通过 ES 模块导入的模块，它们必须显式地作为脚本包含在“type”设置为“text/babel”的脚本中。所以 index.js 脚本中通过 ES 模块导入的 JSX 文件是在 index.js 被 babel 转译后导入的，本身并没有转译。
还得到了一个建议，即出于开发目的使用服务人员获取和执行我的脚本。 babel-standalone 在获取后转换它们