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

Question

我用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';

這導致我的瀏覽器開發工具給我錯誤：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"
  }
}

Answer 1

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';
....

Answer 2

您無法從'bundle.js'導入，因為它被編譯為ES5而ES5不支持模塊（導入和導出）。

將React導入另一個js的正確方法是通過導入

import React from 'react'

有關模塊的更多信息，請訪問： https ： //www.sitepoint.com/understanding-es6-modules/

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

問題描述

2 個解決方案

解決方案1
3 已采納 2016-12-27 10:50:54

解決方案2
3 2016-12-27 10:57:27

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

問題描述

2 個解決方案

解決方案1 3 已采納 2016-12-27 10:50:54

解決方案2 3 2016-12-27 10:57:27

解決方案1
3 已采納 2016-12-27 10:50:54

解決方案2
3 2016-12-27 10:57:27