无法导入内联babel ReactJS unpkg中的文件

Question

大家好，我正在使用React和React-DOM unpkg将react添加到我的网页上。我还使用babel unpkg来启用jsx。但是我在导入另一个文件时遇到了问题。这是文件代码

class Trial extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}

module.exports = Trial;

然后，我用下面的代码将它导入到我的html中

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">

const Trial = require('./App')

class App extends React.Component {
    render() {
        return (
            <div className="navbar">
                <Trial />

                ......

            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

但它一直导致错误...

Uncaught ReferenceError: require is not defined
at <anonymous>:38:14
at n (babel.min.js:12)
at r (babel.min.js:12)
at o (babel.min.js:12)
at u (babel.min.js:12)
at E (babel.min.js:1)

有人知道发生了什么吗？

Answer 1

如果你真的想在运行时使用import / require，要么使用import语句，要么使用动态模块加载器库，比如SystemJS或RequireJS (虽然后者很古老)。

此外，在生产环境中不推荐使用而不是在运行时执行JSX转换。