Webpack：使用 Bundle.js，“未定义 React”答案

【问题标题】：Webpack: Using Bundle.js, "React is not defined"Webpack：使用 Bundle.js，“未定义 React”
【发布时间】：2017-05-11 15:37:33
【问题描述】：

我使用 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、fixed-data-table、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。

在我的功能性 .js 文件中，内容派生自我的反应类，我将以下内容添加到开头（我假设错误源于此）

import React from './bundle';
import ReactDOM from './bundle';
import {Table, Column, Cell} from './bundle';
import Chart from './bundle';
import vis from './bundle';

这导致我的浏览器开发工具给我错误：未捕获的引用错误：React 未定义。

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

这是我的 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"
  }
}

【问题讨论】：

你的 package.json 是什么样的？仔细检查您是否实际安装了 react 依赖项。
我已编辑以包含 package.json。

标签： javascript jquery node.js webpack

【解决方案1】：

Webpack 将从'./main.js' 开始并读取import 语句以确定需要捆绑的模块。

webpack concept

更新：

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

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

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

main.js：

import React from 'react';
....

【讨论】：

对不起，如果我解释得不好；我已经在 index.html 中添加了 bundle.js，然后删除了“旧”源（如 react、react-dom、visjs 和 chartjs），因为它们现在应该在 bundle.js 中。
在这种情况下，您不需要任何导入。
如果我在创建 reactclasses 的地方创建另一个 .js 文件，则不会？现在，当我调用 react 时，该文件显示“缺少导入语句”，因此该过程中肯定出现了问题。也许我使用 Main.js 的方法是错误的..？只是在那里导入它们？应该不一样吗？
不要像node_modules/react那样删除你的源码，在每一个新的js文件中导入才是正确的方式。
node_modules 没有被触及，它们仍然存在。但是你不是可以将所有的node_modules打包到一个JS文件中，然后从那里导入吗？

【解决方案2】：

你不能从 'bundle.js' 导入，因为它被编译成 ES5 并且 ES5 不支持模块（导入和导出）。

将 React 导入另一个 js 的正确方法是通过 import

import React from 'react'

您可以在以下位置找到有关模块的更多信息： https://www.sitepoint.com/understanding-es6-modules/

【讨论】：

所以在我的反应文件中，我应该只做import React from 'react'，它应该可以工作..？这不是我已经尝试过的吗 - 我不太确定 :) 如果我不能将所有东西与 webpack 捆绑并从那里使用它，那到底有什么意义？
我认为您没有正确包含 bundle.js。你能提供repo的链接吗？
很遗憾，我无法显示 repo。我只是替换了我之前导入 react 的方式，然后在 html 头中引用了 bundle.js。作为<script src="bundle.js"></script>