如何让 ES6 模块和 JSX 在没有服务器端构建的情况下工作？答案

【问题标题】：How to make ES6 modules and JSX working without server-side build?如何让 ES6 模块和 JSX 在没有服务器端构建的情况下工作？
【发布时间】：2021-10-09 10:08:19
【问题描述】：

我想将 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 没有预处理加载的文件。我怎样才能让它发挥作用？

【问题讨论】：

标签： jsx es6-modules

【解决方案1】：

这已链接到 DataFormsJS jsxLoader 的 GitHub 问题，该问题与自定义的 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 文件时动态下载和编译它们。

有关完整的详细信息，请参阅 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" />
    );
}

【讨论】：