Question

尝试使用React导入组件时遇到麻烦。

app.js：1未捕获的ReferenceError：require未定义在：5：12 在我（babel.min.js：24）在r（babel.min.js：24）在e.src.n。（：3000 /匿名函数）中。l.content（https://unpkg.com/babel-standalone@6.26.0/babel.min.js:24:30503）在XMLHttpRequest.n.onreadystatechange（babel.min.js：24）

经过一番研究，我发现该错误是由于浏览器无法理解$('.expand-section').click(function() { buttonId = $(this).attr('id'); console.log(buttonId); if(buttonId === 'expandEvent') { $('.event-section').removeClass('col-lg-6'); $('.event-section').addClass('col-lg-3 order-1'); $('.event-section').find('button').addClass('hidden'); $('.permanent-section').removeClass('col-lg-6'); $('.permanent-section').addClass('col-lg-1 order-2'); $('.event-section').addClass('sectionMinimized'); $('.permanent-section').find('h2').addClass('header-minimize'); $('.permanent-section').find('p').addClass('hidden'); $('.permanent-section').find('button').addClass('hidden'); console.log($('.sectionMinimized').attr('id')); } else { $('.permanent-section').removeClass('col-lg-6'); $('.permanent-section').addClass('col-lg-3 order-1'); $('.permanent-section').find('button').addClass('hidden'); $('.event-section').removeClass('col-lg-6'); $('.event-section').addClass('col-lg-1 order-2'); $('.event-section').addClass('sectionMinimized'); $('.event-section').find('h2').addClass('header-minimize'); $('.event-section').find('p').addClass('hidden'); $('.event-section').find('button').addClass('hidden'); console.log($('.sectionMinimized').attr('id')); } }); $('.sectionMinimized').click(function() { console.log("HEY!"); });引起的，因此我尝试安装webpack，但没有成功，因此我进行了其他研究，最后不得不禁用Windows防火墙，然后我就可以运行npm install了，我明白了：

webpack@4.28.4从127个贡献者中添加了157个程序包，并在18.717秒内审核了36574个程序包，发现运行了31个严重漏洞   import进行修复，或npm audit fix进行详细说明

但是我的项目中什么也没出现。

我的所有项目都在下面：

index.html

npm audit

/src/components/com.js

<!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>

/src/components/app.js

class Com extends React.Component {
  render() {
    return <div>
      <h1>Hey this is my com component</h1>
    </div>
  }
}

export default Com

希望有人可以帮助我解决这个问题。

（我想在问题开始时说Hello或Hi，但我不知道为什么我不能编辑它，所以在这里问好。）

编辑

我终于可以使用webpack了。

webpack.config.js

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'))

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

Answer 1

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

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

https://www.npmjs.com/package/webpack-cdn-plugin

-编辑-

您可以做npx create-react-app your-app

或

或者，如果您只想反应和通天塔，可以使用npm。

确保您具有package.json。

npm init

添加反应。

npm install react react-dom --save-dev

https://www.npmjs.com/package/react-dom

添加通天符。

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

https://babeljs.io/setup#installation

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

然后重新配置webpack.config.js。

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'
            ]
          }
        }
      }
    ]
  }
};

https://webpack.js.org/configuration/

尝试在React中导入组件时遇到麻烦

1 个答案: