猿问

在 babel-standalone 中使用 ES 模块

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


“如果你想使用你的浏览器对 ES 模块的原生支持，你通常需要在你的脚本标签上设置一个 type="module" 属性。使用@babel/standalone，设置一个 data-type="module" 属性来代替“


但是出于某种原因，当包含我的主要 index.js 文件（使用导入导入其他 js / jsx 文件）时，babel 似乎正在将我的导入语句转换为 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>

谢谢您的帮助


繁星淼淼
浏览 232回答 2
2回答

墨色风雨

对于（我的）未来参考，这是一个完整的工作示例。你可以将下面的代码放入 index.html 并在网络浏览器中运行它，你将拥有一个使用 JSX 的 React 应用程序。来源： https: //codesandbox.io/s/dikoh?file =/index.html&nbsp; <!DOCTYPE html>&nbsp; <html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0" />&nbsp; &nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge" />&nbsp; &nbsp; &nbsp; <title>Static Template</title>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; <div id="main"></div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>&nbsp; &nbsp; &nbsp; <script type="text/babel" data-presets="react" data-type="module">&nbsp; &nbsp; &nbsp; &nbsp; import {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ChakraProvider,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Box,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text&nbsp; &nbsp; &nbsp; &nbsp; } from "https://cdn.skypack.dev/@chakra-ui/react";&nbsp; &nbsp; &nbsp; &nbsp; import React, { useRef } from "https://cdn.skypack.dev/react";&nbsp; &nbsp; &nbsp; &nbsp; import ReactDOM from "https://cdn.skypack.dev/react-dom";&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; const MyText = ({ color, ...props }) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <Text fontWeight="bold" as="span" {...props} />;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; function Foo() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Foo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; function App() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Box>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Hello <MyText>Skypack</MyText>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Foo/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Box>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ReactDOM.render(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ChakraProvider>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <App />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ChakraProvider>,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("main")&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </body>&nbsp; </html>
0

翻过高山走不出你

Amareis 在 babel 的 github 页面上回答了我的问题：https://github.com/babel/babel/discussions/12059问题是 babel 不会转译通过 ES 模块导入的模块，它们必须明确包含为脚本，并将“type”设置为“text/babel”。所以通过 index.js 脚本中的 ES 模块导入的 JSX 文件是在 index.js 被 babel 转译后导入的，而不是它自己转译。还得到了一个建议，为了开发目的，使用 service worker 获取并执行我的脚本。babel-standalone 在获取后转换它们
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答