如何让ES6模块和JSX在没有服务器端构建的情况下工作？ [英] How to make ES6 modules and JSX working without server-side build?
本文介绍了如何让ES6模块和JSX在没有服务器端构建的情况下工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望将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>
我的test.js：
export default function test(props) {
return <div>
...
</div>
}
结果：我在浏览器控制台中收到错误信息，显示
Uncaught SyntaxError: Unexpected token '<'
所以我假设Babel没有对加载的文件进行预处理。我如何才能使其工作？
推荐答案
这链接到DataFormsJS jsxLoader的giHub问题，该问题与自定义LazyLoad组件一起提供类似的功能，但是它不使用标准的import fn from './file.js'语法。
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md
https://github.com/dataformsjs/dataformsjs/issues/18#issuecomment-898310364
我是作者，基本上jsxLoader是用于JSX/Reaction的微型(6.2kB)基于浏览器的编译器。我已经创建了一个单独的LazyLoad组件，它可以在第一次使用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" />
);
}
这篇关于如何让ES6模块和JSX在没有服务器端构建的情况下工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
