中的错误/~/react网络图/lib/map.css

Question

我想使用react网络图库。我安装了node v0.10.25，npm版本1.3.10，并且能够使用node运行.js文件。我遵循了安装webpack和babel的教程，这两个教程似乎都在使用教程示例。我已经使用npm安装了react网络图组件。这最初抱怨我的兄弟姐妹依赖我们错了。当我重新加载react和react dom并给出特定版本（npm install--save react@^0.14.3 react dom@^0.143）时，这一问题得到了修复

因此，一切似乎都按照教程进行。

以下是index.jsx文件内容：

console.log( "hw" )
import React from 'react';
import {render} from 'react-dom';
import { TrafficMap } from "react-network-diagrams";
class App extends React.Component {
  render () {
    return <TrafficMap width={980} height={500} margin={50}
            topology={topo}
            traffic={traffic}
            edgeColorMap={edgeColorMap}
            edgeDrawingMethod="bidirectionalArrow"
            edgeThinknessMap={edgeThinknessMap}
            edgeShapeMap={edgeShapeMap}
            nodeSizeMap={nodeSizeMap}
            nodeShapeMap={nodeShapeMap}
            stylesMap={stylesMap}
            selection={mapSelection}
            onSelectionChange={this.handleSelectionChanged} />
    //return <p> Hello React!</p>;
  }
}
render(<App/>, document.getElementById('app'));

这是webpack 的输出

ubuntu@ip-172-31-38-114:~/doe2$ ./node_modules/.bin/webpack -d
Hash: 1ecd317731574aa4e7fd
Version: webpack 1.13.0
Time: 5901ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.38 MB       0  [emitted]  main
bundle.js.map  1.55 MB       0  [emitted]  main
    + 204 hidden modules
ERROR in ./~/react-network-diagrams/lib/map.css
Module parse failed: /home/ubuntu/doe2/node_modules/react-network-diagrams/lib/map.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)
    at Parser.pp.raise (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
    at Parser.pp.unexpected (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
    at Parser.pp.semicolon (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1462:73)
    at Parser.pp.parseExpressionStatement (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1976:8)
    at Parser.pp.parseStatement (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1754:188)
    at Parser.pp.parseTopLevel (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
    at Parser.parse (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
    at Object.parse (/home/ubuntu/doe2/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
    at Parser.parse (/home/ubuntu/doe2/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/ubuntu/doe2/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/ubuntu/doe2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at fs.js:268:14
    at /home/ubuntu/doe2/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:43:10
    at Object.oncomplete (fs.js:107:15)
 @ ./~/react-network-diagrams/lib/map-base.js 55:0-20

react网络图网站中提供的信息(http://software.es.net/react-network-diagrams/#/?_k=xs005u)我不清楚。在"示例"标题下，它说我必须运行npm安装。我已经在几个不同的目录中完成了这项工作，但这并没有帮助，我在黑暗中工作。npm运行的网站是包中的一个脚本，它似乎做了一些事情，但它说要与一个网络客户端连接到8080端口，但那里没有任何内容。

我只是觉得我错过了一两个关键的部分来把整个事情整合在一起。

谢谢你的帮助。

伊恩。

Answer 1

看起来您缺少了webpack的css加载程序配置。

1） 首先安装css加载程序（导入css）和样式加载程序（将css添加到DOM）

npm install css-loader style-loader --save-dev

2） 将加载程序配置添加到您的webpack配置

{
  // ...
  module: {
    loaders: [
        { test: /.css$/, loader: "style!css" }
    ]
  }
}

您可以在这里找到更多信息Webpack：嵌入式STYLESHEETS

Answer 2

Promises是ES2015（以前的ES6）的一部分。它们还没有集成到所有环境中，包括您的环境。有一个非常著名的库添加了对新ecmascript特性的支持，它被称为Babel.js.

就像我们添加了一个css加载程序一样，我们将添加一个babel加载程序：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

现在添加到您的加载器：

{
  // ...
  module: {
    loaders: [
        { test: /.css$/, loader: "style!css" },
        {
          test: /.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015']
          }
        }
    ]
  }
}

有关更多信息：babel loader