ERROR in ./~/react-network-diagrams/lib/map.css

Question

私はreact-network-diagramsライブラリを使いたいと思っています。私はノードv0.10.25、npmバージョン1.3.10をインストールし、ノードを使用して.jsファイルを実行することができます。私はwebpackとbabelをインストールするためのチュートリアルに従っており、これらは両方ともチュートリアルの例で動作するように見えます。 npmを使用して反応ネットワークダイアグラムコンポーネントをインストールしました。これは当初私の兄弟の依存関係が間違っていると不平を言った。これは、反応と反応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 run web-siteはパッケージ内のスクリプトで、何かをするようですが、Webクライアントとポート8080に接続すると言いますが、そこでは何も聞こえません。

私はちょうど私がすべてを一緒に持って来るために1つまたは2つの重要なビットが欠けているように感じる。

ありがとうございました。

イアン。

Answer 1

ウェブパックのCSSローダー構成が不足しているようです。

1）まず、CSS-ローダー（輸入CSS）をインストールして、スタイル・ローダー（DOMにCSSを追加します）

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

2）あなたのWebPACKの設定

にローダー設定を追加します。

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

あなたがWebpack: EMBEDDED STYLESHEETS

Answer 2

約束はES2015の一部（以前ES6）です、ここでいくつかのより多くの情報を見つけることができます。あなたを含むすべての環境にまだ統合されていません。 Babel.jsと呼ばれる新しいecmascript機能のサポートを追加する非常によく知られたライブラリがあります。

我々はCSS-ローダーを追加しただけのように、我々はバベル・ローダーを追加しようとしている。

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