Javascript 在其他应用程序中加载ReactJS将返回index.js中的模块解析失败错误

我正在使用一个非常新的JS-dev环境（），据介绍，React很容易在其他JS框架中实现

在目录根目录下的index.js文件中，我有以下代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";




function Button() {
  return <button id="btn">Say Hello</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Hello!');
    });
  }
);

和我的webpack.config：

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

.LRC文件：

{
  "presets": ["env", "react"]
}

对React来说还是相当新的，但我喜欢在其中构建应用程序，但我真的很想学习如何将它集成到其他JS框架中，以便更广泛地使用它

package.json文件或webpack.config中是否缺少某些内容？我四处看了不少，但没找到多少

---

提前谢谢你的帮助

尝试在

use.loader

下指定

babel loader

。见下文：

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
        }
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

我建议使用

createreact-app

，而不是自己编写网页包配置，这样更简单。还要确保导入jquery

---

试着让我知道这是否有效

你有一个.babelrc吗？是的，我有。它是“预设的”：[“环境”，“反应”]如果你从反应开始，你可以先尝试创建反应应用程序。我没有看到jquery被导入，$（'#btn'）。单击（function（）{，$来自jquery。完全同意使用create react应用程序，但我喜欢知道如何自己构建它，当我使用create react应用程序时，它加载得很好。谢谢你的回答！@logos_164帮你自己一个忙，然后读一下：谢谢jay，我确实读过了，这就是我如何配置和设置的，我仍然对它感到困惑H

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
        }
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};