Javascript 尝试在React中导入组件时出现问题_Javascript_Reactjs

Javascript 尝试在React中导入组件时出现问题

javascript reactjs

Javascript 尝试在React中导入组件时出现问题,javascript,reactjs,Javascript,Reactjs,尝试使用React导入组件时遇到问题 app.js:1未捕获引用错误：未定义require 时间：5:12 在i（babel.min.js:24）在r（babel.min.js:24）在e.src.n.（：3000/匿名函数）.l.content（）在XMLHttpRequest.n.onreadystatechange（babel.min.js:24）经过一些研究，我发现错误是因为浏览器不理解导入，所以我尝试安装webpack，但它不起作用，所以我做了一些其他研究，最后我不得不禁用wi

尝试使用React导入组件时遇到问题

app.js:1未捕获引用错误：未定义require 时间：5:12 在i（babel.min.js:24）在r（babel.min.js:24）在e.src.n.（：3000/匿名函数）.l.content（）在XMLHttpRequest.n.onreadystatechange（babel.min.js:24）

经过一些研究，我发现错误是因为浏览器不理解导入，所以我尝试安装webpack，但它不起作用，所以我做了一些其他研究，最后我不得不禁用windows防火墙，然后我可以运行npm安装，我得到了以下结果：

webpack@4.28.4添加了来自127个贡献者的157个包，并在18.717s中审计了36574个包，发现运行了31个高严重性漏洞
```
npm audit fix
```
修复它们，或
```
npm audit
```
获取详细信息

但我的项目中没有任何内容

下面是我的所有项目：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="app"></div>

    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <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="./src/components/app.js" type="text/babel"></script>

  </body>
</html>

我不知道它是否正确，但我确实让Babel工作，并且我可以正确导入组件。

Webpack构建了一个js捆绑文件，因此您需要去掉html文件中的cdn。您可以使用插件将它们添加到webpack.config文件中

npm install webpack-cdn-plugin --save-dev

-编辑-

你可以做

npx创建反应应用程序你的应用程序

或

或者，如果你只是想反应和巴贝尔，你可以使用npm

确保您有一个package.json

添加反应

加上巴别塔

您可以在package.json中找到依赖项

然后重新配置webpack.config.js

我们可以为您提供网页配置吗？或者如果您不想与此抗争，我建议创建react应用程序。我没有任何网页，因为我没有让它工作，我以前使用过creat react应用程序，但cdn在我的情况下更有效，所以我想使用它们。但是。。。。你说的效率更高是什么意思。这是一个开发环境，您的“导出的”生产代码将自己编译成一个脚本文件，您将在服务器上托管它，没有CDN，没有依赖性，什么都没有。一个用于production.cdn的静态脚本文件的加载速度比我服务器上的文件快，我只需要提供几个ko，而不是400ko，所以对我来说，是的，它更高效。我在谷歌上搜索了webpack cdn插件，它似乎生成了一个index.html，其中包含cdn，所以我真的不明白为什么我不能自己做。我需要一个webpack.config.js来处理React。如果你想使用cdn的，你有我的第一个答案。如果你想要最简单的方法，我编辑了我的答案，并向你展示了如何安装CreateReact应用程序。最后的答案将让您在webpack中使用react和babel，并向您展示如何使用已配置的webpack.config.js文件设置它们。最后一个选项是最令人困惑的，但它将为你的应用程序提供最大的灵活性和定制。我用我的webpack.config.js编辑了我的帖子。我不知道我这样做时是否通知过你，你在代码中做了哪些更改，使其正常工作？您是否删除了Html文件中的cdn？你在Webpack.config.js文件中添加了什么？我终于让Webpack正常工作了，所以我只是在我的帖子中创建了Webpack.config.js，就是这样（也删除了babel cdn，我按照你说的通过npm安装了它）

import Com from './com.js'

class App extends React.Component {
  render() {
    return <div>
      <h1>Hey this is my app component</h1>
      <p>{Math.random() * 10}</p>
      <Com />
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

const webpack = require("webpack")
const path = require("path")

let config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "./bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ]
        }
      }
    ]
  }
}

module.exports = config

npm install webpack-cdn-plugin --save-dev

npm init

npm install react react-dom --save-dev

npm install babel-loader @babel/core 
@babel/preset-env @babel/preset-react --save-dev

module.exports = {
  entry: './src/app.js',
  output: {
     path: path.join(_dirname, 'public'),
     filename: 'bundle.js'
   module: {
     rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
               '@babel/preset-env',
               '@babel/preset-react'
            ]
          }
        }
      }
    ]
  }
};