node.js - npm run serve 没有在带有 webpack 环境的 react js 中运行项目

Question

我正在尝试在reactjs 中路由一些组件。所以我安装npminstall 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;

Answer 1

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

npm install babel-preset-es2015

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

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

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

Answer 2

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

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

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