极客观点
项目管理
HarmonyOS
我正在构建一个新的 React 应用程序但收到以下错误 - “未定义要求”
你好-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello-world.js">
</body>
</html>
你好世界.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
应用程序.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
我从我的客户端运行它，并且没有运行任何 Web 服务器。
我试图包括 http://requirejs.org/docs/release/2.2.0/minified/require.js 但它给出了一个完全不同的错误。
原文由 user1050619 发布，翻译遵循 CC BY-SA 4.0 许可协议
您正在尝试在浏览器中使用 CommonJS 模块。这是 行不通 的。
你如何使用它们？当你在 ES6 中编写
import ... from ...时，Babel 会将这些调用转换为名为 CommonJS 的模块定义，并且由于 CommonJS 不在浏览器中，你将从require()得到一个未定义的错误。此外，您还尝试加载 RequireJS，它使用称为 AMD 的不同模块定义模式，异步模块定义，并且不会为您处理
require调用。您可以 将它们包装 在 RequireJS 特定调用中。如果你想在代码库中使用 CommonJS 模块，你需要先将它们与 Browserify 或 webpack 捆绑在一起。这两个工具会将您的
require调用转换为您可以在浏览器中使用的一些粘合魔法。但在您的特定情况下，如果您删除
import调用，让浏览器处理并将您创建的类附加到window对象，您的代码应该可以工作。