npm run serve 没有在带有 webpack 环境的 react js 中运行项目答案

【问题标题】：npm run serve not running the project in react js with webpack environmentnpm run serve 没有在带有 webpack 环境的 react js 中运行项目
【发布时间】：2017-03-11 11:19:20
【问题描述】：

我正在尝试在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"
  }
}

这是我的网络包文件

    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;

【问题讨论】：

标签： node.js reactjs npm webpack serve

【解决方案1】：

您正在运行不支持 Destructuring 的旧 Node.js 版本。

包 serve 使用该功能，因此您至少需要 Node.js 版本 6，即当前的 LTS。它甚至在它的README 中说，它也在package.json 中指定。

最简单也是最好的解决方案是升级 Node.js。或者，您可以使用 babel 转译模块，但这很不方便。

【讨论】：

我在节点 cmd 中检查节点版本“node -v”。我的版本是 v4.3.2。我认为这是最新版本。
这不是最新版本。当前 LTS 是 v6.10.0，当前最新的是 v7.7.2。你落后了 2 到 3 个主要版本。请参阅Node.js 和LTS schedule。节点 4 即将进入维护，仅应用关键安全补丁。

【解决方案2】：

你需要先从 ES6 编译到 ES5。作为参考，用户应该像你一样添加babel-preset-es2015包。

npm install babel-preset-es2015

然后，使用以下内容创建一个 .babelrc：

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

注意：最新版本的node默认支持ES6 Destruction。因此，更新节点版本可能有助于解决您的问题。

【讨论】：

.babelrc 文件？
你检查我的包文件，在上面附上！
是的，我有一个 .babelrc 文件。
好的，请提及你的 babelrc 配置
{ "presets" : ["es2015", "react"] }