我想将JSX与ES6模块一起使用，并且不需要在服务器端构建。
我的index . html。
<!DOCTYPE html>
<html>
<head>
<script src="babel.min.js"></script>
</head>
<body>
...
<script type="text/babel" data-type="module">
import 'test' from './test.js'
...
</script>
</body>
</html>
. js:
export default function test(props) {
return <div>
...
</div>
}
结果:我在浏览器的控制台中得到一个错误说
Uncaught SyntaxError: Unexpected token '<'
所以我假设babel没有预处理加载的文件。我怎样才能让它工作?
这是链接到一个GitHub问题的DataFormsJS jsxLoader与自定义LazyLoad组件提供类似的功能，但它不使用标准的import fn from './file.js'语法。
https://dataformsjs.com/en/
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md
https://github.com/dataformsjs/dataformsjs/issues/18 issuecomment - 898310364
我是作者，基本上jsxLoader是一个很小的(6.2 kB)基于浏览器的JSX/React编译器。我已经创建了一个单独的LazyLoad组件，它可以在第一次使用JSX文件时动态下载和编译JSX文件。
详细信息请参阅github问题，下面是一些基本代码:
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/DataFormsJS.min.js"></script>
function CalculatorPage() {
return (
<LazyLoad
scripts="calc-react.jsx"
isLoading={<ShowLoading />}
isLoaded="Calculator" />
);
}