RequireJs 与 Babel答案

【问题标题】：RequireJs with BabelRequireJs 与 Babel
【发布时间】：2020-10-14 19:08:43
【问题描述】：

我正在尝试使用 ReactJs + RequireJs 来实施项目。我可以使用given example 加载带有 React 和 Babel 库的 React 组件。现在我正在尝试将相同的 React 组件与 RequireJs 一起使用。但是由于 unexpected token '

出现错误

下面是我的代码：

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <title>New project</title>
        <link rel="stylesheet" href="./assets/core/lib/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="./assets/css/core.css">
        <link rel="stylesheet" href="./assets/css/style.css">        
        <script crossorigin src="./assets/core/lib/reactjs/babel.min.js"></script>
        <script data-main = "./modules/babel-scripts" src = "./assets/core/lib/require/require.js"></script>
        <script src = "./modules/require-config.js"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

require-config.js

requirejs.config({
    paths: {
        'react': '../assets/core/lib/reactjs/react.development',
        'react-dom': '../assets/core/lib/reactjs/react-dom.development',
        // 'babel': '../assets/core/lib/reactjs/babel.min',
        'jquery': '../assets/core/lib/jquery/jquery-3.5.1.min',
        'bootstrap': '../assets/core/lib/bootstrap/bootstrap.min',
        'header': './header'
    }
});

babel-scripts.js

requirejs(['jquery', 'react', 'react-dom', 'header'], function($, React, ReactDOM, Header) {
    ReactDOM.render(
        <Header />, document.getElementById('root')
    );
});

header.js

requirejs(['jquery', 'react', 'react-dom'], function($, React, ReactDOM) {
    return React.createClass( {
        render: function () {
            return(<div>hi....</div>)
        }
    });
});

我想问题在于未正确实现的 babel 库。尝试了很多来修复它，但无法获得正确的输出。请建议您的意见。提前谢谢你..

【问题讨论】：

标签： reactjs requirejs babeljs

【解决方案1】：

RequireJS 以文本的形式异步加载模块，加载后执行代码。这里的问题是您的文件 babel-scripts.js 不包含有效的 JavaScript，它是 JSX。

有两种可能的选择：

将 JSX 转换为有效的 JavaScript。可以通过 Babel 等工具来完成
通过 RequireJS 插件即时翻译 JSX，这个主题已经在 SO:Using reactjs with requirejs

【讨论】：