Reactjs webpack babel和react简单示例失败_Reactjs_Webpack_Babeljs

Reactjs webpack babel和react简单示例失败

reactjs webpack

Reactjs webpack babel和react简单示例失败,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,我正在用React和Babel尝试webpack。我创建了一个简单的示例： components.jsx： import React from 'react'; import ReactDOM from 'react-dom'; import { render } from 'react-dom' class Hello extends React.Component { render() { return <h1>Hello</h1> } } Reac

我正在用React和Babel尝试webpack。我创建了一个简单的示例：

components.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'

class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}
ReactDOM.render(<Hello/>, document.getElementById('test'));
export default Hello;

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack, React and Babel example</title>
</head>
<body>
  <div>  </div>
  <div id="test"> </div>
  <script src="bundle.js"> </script>
</body>
</html>

我还安装了所有必要的模块：babel loader、babel core babel-preset-es2015 babel preset react、react、react dom

但是，当我在当前文件夹中键入“webpack”时，总是收到错误消息：

在./index.js模块中找不到错误：错误：无法解析模块中的“components.jsx”

这是一个如此简单的例子，我必须犯一个巨大的愚蠢的错误。但我就是找不到

谢谢

Derek

据我所知，

index.js

和

components.jsx

位于同一个文件夹中，如果是真的，路径应该如下

import Hello from "./components.jsx";

据我所知，

index.js

和

components.jsx

位于同一个文件夹中，如果是真的，路径应该如下

import Hello from "./components.jsx";

当您尝试按名称导入模块时，应在

节点\u模块

下找到该模块。但这可能不是您想要的位置，所以您应该通过（相对）路径导入它

import Hello from "./components.jsx";

如果

index.js

和

components.jsx

文件共享一个文件夹，则上述操作将起作用。如果没有，则需要更改

以指向正确的位置。

当您尝试按名称导入模块时，应该在

节点\u modules

下找到该模块。但这可能不是您想要的位置，所以您应该通过（相对）路径导入它

import Hello from "./components.jsx";

如果

index.js

和

components.jsx

文件共享一个文件夹，则上述操作将起作用。如果没有，那么您需要更改

以指向正确的位置。

太棒了！很有魅力，太棒了！工作起来很有魅力。