Javascript 网页包：使用Bundle.js；未定义“反应”；_Javascript_Jquery_Node.js_Webpack

Javascript 网页包：使用Bundle.js；未定义“反应”；

javascript jquery node.js webpack

Javascript 网页包：使用Bundle.js；未定义“反应”；,javascript,jquery,node.js,webpack,Javascript,Jquery,Node.js,Webpack,我用Webpack捆绑了我所有的npm模块。这是我的webpack.config.js： "use strict"; module.exports = { entry: './main.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /.js?$/,

我用Webpack捆绑了我所有的npm模块。这是我的webpack.config.js：

"use strict";

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /\.json$/, loader: "json"},
        ]
    },
};

下面是我提到的main.js。如您所见，我尝试导入React、React dom、固定数据表、chartjs、jquery和visjs

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import jquery from 'jquery';
import vis from 'vis';

一切都很好，我从index.html中删除了react、chartjs、jquery等.src，只参考了新创建的bundle.js

在我的functional.js文件中，内容是从中派生的，我的react类是从中派生的，我在开头添加了以下内容（我假设错误源于此）

这导致浏览器开发工具中出现错误：未捕获引用错误：未定义React

我在捆绑过程中哪里出错了？我假设捆绑进行得很顺利，因为没有错误。但我如何导入，例如，在另一个.js文件中正确地作出反应

这是我的package.json：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "chartjs": "^0.3.24",
    "webpack": "^1.12.9"
  },
  "dependencies": {
    "chartjs": "^0.3.24",
    "fixed-data-table": "^0.6.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "vis": "^4.17.0"
  }
}

Webpack将从

'./main.js'

开始，并读取

import

语句以确定需要捆绑的模块

更新：

由于库已经在bundle.js中，您的文件应该如下所示：

html（不要在您编写的.js文件中包含任何已经导入的库）

您不能从“bundle.js”导入，因为它被编译为ES5，ES5不支持模块（导入和导出）

正确地导入和响应另一个js的方法是通过导入

import React from 'react'

有关模块的更多信息，请访问：

您的package.json是什么样子的？仔细检查您是否已实际安装了react依赖项。我已编辑以包含package.json。如果我解释得不好，很抱歉；我已经在index.html中添加了bundle.js，然后删除了“旧”源（如react、react dom、visjs和chartjs），因为它们现在应该在bundle.js中。在这种情况下，您不需要任何导入。如果我在创建react类的地方创建另一个.js文件，就不需要了？现在，当我调用react时，这个文件显示“missing import statement”，所以在这个过程中肯定出了问题。也许我使用Main.js的方法是错误的。。？只是在那里进口？应该有所不同吗？不要删除你的源代码，比如node_modules/react，在每个新的js文件中导入它是正确的方式。node_模块没有被触及，它们仍然存在。但是，您不认为可以将所有节点模块捆绑到一个JS文件中，然后从那里导入吗？因此，在我的react文件中，我应该只从“react”执行

导入react

，它应该可以工作。。？这不是我已经尝试过的吗？我不太确定：）如果我不能用webpack捆绑所有东西并从那里使用它，那到底有什么意义？我认为你没有正确地包含bundle.js。你能提供回购协议的链接吗？很遗憾，我不能显示回购协议。我只是简单地替换了之前导入react的方式，然后在html头部引用bundle.js。作为

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

import React from 'react';
....

import React from 'react'