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：

<script src="bundle.js"></script>

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

在带有React类等前端功能的主.js文件中，我现在添加：

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import vis from 'vis';

它正确地确认了React功能，这很棒。但是，当我打开index.html时，在第1行（我导入反应的地方），它给了我以下错误：

Uncaught ReferenceError: require is not defined
    at eval (eval at n.run (babel.5.8.38.browser.min.js:3), <anonymous>:6:14)
    at Function.n.run (babel.5.8.38.browser.min.js:3)
    at l (babel.5.8.38.browser.min.js:3)
    at babel.5.8.38.browser.min.js:3
    at XMLHttpRequest.s.onreadystatechange (babel.5.8.38.browser.min.js:3)
(anonymous) @ main.js:1
n.run @ babel.5.8.38.browser.min.js:3
l @ babel.5.8.38.browser.min.js:3
(anonymous) @ babel.5.8.38.browser.min.js:3
s.onreadystatechange @ babel.5.8.38.browser.min.js:3

我不明白为什么要求不被翻译，因为我使用babel-loader来翻译它以便浏览器理解。

我在这个过程中做错了什么吗？ Webpack有一个我发现的陡峭的学习曲线 - 所以它很可能是我自己在某个地方的新手错误。

Webpack：将React添加到Bundle.js后，“需要未定义”

0 个答案: