要求未定义 [英] require is not defined
问题描述
我正在构建一个新的 React 应用程序，但收到以下错误 -要求未定义"
hello-world.html
<头><meta charset="UTF-8"/><title>你好 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><身体><div id="示例"></div><script type="text/babel" src="hello-world.js"></html>hello-world.js
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App.jsx'导入应用程序；ReactDOM.render(<应用程序/>,document.getElementById('example'));App.jsx
从'react'导入React；类 App 扩展了 React.Component {使成为() {返回 (<div>你好，世界！！！);}}导出默认应用程序；
我从我的客户端运行这个，没有运行任何网络服务器.
我尝试包含 http://requirejs.org/docs/release/2.2.0/minified/require.js但它给出了一个完全不同的错误.
您正在尝试从浏览器中使用 CommonJS 模块.这将不起作用.
你如何使用它们?当您在 ES6 中编写 import ... from ... 时，Babel 会将这些调用转换为名为 CommonJS 的模块定义，并且由于 CommonJS 不在浏览器中，您将从 <代码>require().
此外，您还尝试加载 RequireJS，它使用称为 AMD、异步模块定义的不同模块定义模式，并且不会为您处理 require 调用.您可以在 RequireJS 特定调用中包装它们.
如果你想在你的代码库中使用 CommonJS 模块，你需要首先将它们与 Browserify 或 webpack.这两个工具会将您的 require 调用转换为一些可以在浏览器中使用的粘合魔法.
但在您的特定情况下，如果您删除 import 调用并让浏览器处理并将您创建的类附加到您的 window 对象代码应该可以工作.
Im building a new React app but get the following error - "require is not defined"
hello-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>
hello-world.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Im running this from my client and don't have any web server running.
I tried to include http://requirejs.org/docs/release/2.2.0/minified/require.js but it gives a totally different error.
You're trying to use a CommonJS module from within your browser. This will not work.
How are you using them?
When you write import ... from ... in ES6 Babel will transpile these calls to a module definition called CommonJS and since CommonJS isn't around in the browser you'll get an undefined error from require().
Furthermore, you're also trying to load RequireJS which uses a different module definition pattern called AMD, Asynchronous Module Definition, and will not take care of the require calls for you. You can wrap them in RequireJS specific calls.
If you want to use CommonJS modules in your code base you need to first bundle them with either Browserify or webpack. The two tools will transform your require calls to some glue magic that you can use within the browser.
But in your specific case, if you remove the import calls and just let the browser take care of and attach the classes you've created to the window object your code should work.
这篇关于要求未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
