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

Question

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

4

我用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等源代码，并只引用了新创建的bundle.js。

在我的功能性.js文件中，我的内容和react类派生自此文件，在开头添加以下内容（我认为错误源自此）

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"
  }
}

- cbll

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user4164128

我已经编辑包括了 package.json。 - cbll

2个回答

3

你无法从'bundle.js'导入，因为它被编译为ES5，而ES5不支持模块（导入和导出）。

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

import React from 'react'

你可以在以下链接中找到有关模块的更多信息： https://www.sitepoint.com/understanding-es6-modules/

- lukkasz

那么在我的React文件中，我只需要执行 import React from 'react' 就可以了吗？这不是我已经试过的吗 - 我不太确定 :) 如果我不能通过webpack捆绑所有内容并从那里使用它，那么这样做有什么意义呢？ - cbll

我认为你没有正确地包含bundle.js文件。你能提供仓库链接吗？ - lukkasz

很抱歉，我无法展示代码库。我只是替换了之前导入React的方式，然后在HTML头部引用了bundle.js，如下所示：<script src="bundle.js"></script>。 - cbll

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sing · Accepted Answer

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

由于库已经在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';
....