Question

大家好，我使用React和React-DOM unpkg向我的网页添加反应。我还使用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转换。

无法在嵌入式Babel ReactJS unpkg中导入文件

1 个答案: