Webpack：使用 Bundle.js，“未定义 React”
Posted
技术标签:
【中文标题】Webpack：使用 Bundle.js，“未定义 React”【英文标题】：Webpack: Using Bundle.js, "React is not defined" 【发布时间】：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。 【参考方案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>以上是关于Webpack：使用 Bundle.js，“未定义 React”的主要内容，如果未能解决你的问题，请参考以下文章
从 Webpack bundle.js 获取/导入 bootstrap.js
使用 SourceMap 解绑 webpack bundle.js