开发者问题收集

Webpack:使用 Bundle.js,“React 未定义”

2016-12-27
11084

我使用 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 文件中(内容源自该文件,我的 react 类也来自该文件),我将以下内容添加到开头(我假设错误源于此)

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

这导致我的浏览器开发工具给出错误:Uncaught Referenceerror: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"
  }
}
2个回答

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';
....
Sing
2016-12-27

您无法从“bundle.js”导入,因为它已编译为 ES5,而 ES5 不支持模块(导入和导出)。

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

import React from 'react'

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

lukkasz
2016-12-27