Question

我想使用react-network-diagrams库。我安装了节点v0.10.25，npm版本1.3.10，并且能够使用节点运行.js文件。我已经按照教程安装webpack和babel，这些似乎都在使用教程示例。我使用npm安装了react-network-diagram组件。这最初抱怨我的兄弟依赖我们错了。当我重新加载react和react-dom并给出一个特定的版本（npm install --save react@^0.14.3 react-dom@^0.14.3）时，这个修复了。

所以一切似乎都按照教程进行。

这是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

反应网络图网站（http://software.es.net/react-network-diagrams/#/?_k=xs005u）中提供的信息对我来说并不清楚。在标题示例下，它说我必须运行npm install。我这样做是几个不同的目录，但它没有帮助，我在黑暗中工作。 npm运行web-site是包中的一个脚本，它似乎做了一些事情，但后来它说要连接webclient到端口8080，但没有什么可以听的。

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

感谢您的帮助。

伊恩。

Answer 1

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

1）首先安装css-loader（导入css）和style-loader（将css添加到DOM）

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

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

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

您可以在此处找到更多信息Webpack: EMBEDDED STYLESHEETS

Answer 2

Promise是ES2015（之前的ES6）的一部分。它们尚未集成到所有环境中，包括您的环境。有一个非常着名的库，它增加了对新的ecmascript功能的支持，称为Babel.js。

就像我们添加了一个css-loader，我们将添加一个babel-loader：

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

错误在./~/react-network-diagrams/lib/map.css中

2 个答案: