npm run serve webpack環境のreact jでプロジェクトを実行していません

Question

react jsにいくつかのコンポーネントをルーティングしようとしています。だからnpmインストールserve --save-devをインストールします。私はこのコメント」

NPMの実行が

私はいくつかのエラーを取得しています。

をここに私のパッケージファイルをサーブを実行した後。

ここ

{ 
    "name": "routing", 
    "version": "1.0.0", 
    "description": "routing test", 
    "main": "index.js", 
    "scripts": { 
    "watch": "webpack -d --watch", 
    "build": "webpack", 
    "serve" : "serve ./public" 
    }, 
    "author": "VJ", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.4.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.23.0", 
    "serve": "^5.0.2", 
    "webpack": "^2.2.1" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^4.0.0" 
    } 
} 

私のWebパックファイル

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'public'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    Loaders: [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel-loader' 
     } 
    ] 
    } 
}; 

module.exports = config; 

Answer 1

最初にES6からES5までコンパイルする必要があります。 参考のため、すでに行ったようにbabel-preset-es2015パッケージを追加する必要があります。

npm install babel-preset-es2015 

すると、次のように.babelrcを作成します。

{ 
    "presets": 
    [ 
     "es2015", 
     ... 
    ] 
} 

注：デフォルトではを、ノードの最新バージョンはES6破壊がサポートしています。したがって、ノードのバージョンを更新すると、問題が解決する可能性があります。

Answer 2

Destructuringをサポートしていない古いNode.jsバージョンを使用しています。

パッケージserveはその機能を使用しているため、現在のLTSであるNode.jsバージョン6以上が必要です。それはREADMEでそれを言い、それはpackage.jsonにも指定されています。

Node.jsをアップグレードするのが最も簡単で最善の方法です。代わりに、あなたはバベルとモジュールを蒸散することができますが、それはむしろ不便です。