意外的保留字：import - Webpack、Babel、Node、React

Question

将 SSR 添加到我的应用程序后，我最终在服务器的 index.js 文件中使用了一些 ES6，但现在我无法让它再次在 Heroku 上运行。

我做了很多研究，了解到使用 ES6 需要 babel 来转译服务器文件，但我能找到的几乎每个人的建议通常都需要 .babelrc 文件，或者指定/安装预设，但是据我所知，我已经这样做了。

我发现我越是尝试解决这个问题，我就越感到困惑，所以我想在这里进行一些讨论:) 谢谢大家（完整代码：https://github.com/trm313/mern-boiler）

Heroku 错误

2017-05-08T14:35:04.470656+00:00 app[web.1]: [32m[nodemon] starting `babel-node index.js --presets react,es2015`[39m
2017-05-08T14:35:04.545063+00:00 app[web.1]: You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
2017-05-08T14:35:04.545069+00:00 app[web.1]: Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
2017-05-08T14:35:04.545070+00:00 app[web.1]: 
2017-05-08T14:35:04.545071+00:00 app[web.1]:     npm uninstall -g babel
2017-05-08T14:35:04.545072+00:00 app[web.1]:     npm install --save-dev babel-cli
2017-05-08T14:35:04.545072+00:00 app[web.1]: 
2017-05-08T14:35:04.545073+00:00 app[web.1]: See http://babeljs.io/docs/usage/cli/ for setup instructions.
2017-05-08T14:35:04.554946+00:00 app[web.1]: [31m[nodemon] app crashed - waiting for file changes before starting...[39m

在以下脚本中，“npm run start”在本地运行良好，但在上传到 Heroku 时失败。它抱怨我需要使用'babel-cli'包而不是'babel'，我已经在这样做了..（与“start-dev”相同）

package.json

{
  "name": "react-authentication",
  "version": "1.0.0",
  "engines": {
    "node": "4.4.3",
    "npm": "4.2.0"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon --use-strict index.js",
    "bundle": "webpack",
    "start-old": "node index.js",
    "postinstall": "webpack -p",
    "start-dev": "babel-node index.js --presets react,es2015",
    "start": "nodemon index.js --exec babel-node --presets react,es2015",
    "build": "babel lib -d dist --presets react,es2015",
    "serve": "node dist/index.js",
    "prod": "NODE_ENV=production node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-register": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.16.1",
    "client-sessions": "^0.7.0",
    "cookie-parser": "^1.4.3",
    "express": "^4.14.1",
    "express-session": "^1.15.1",
    "fs": "0.0.1-security",
    "jsonwebtoken": "^7.3.0",
    "material-ui": "^0.17.0",
    "mongoose": "^4.8.3",
    "nodemon": "^1.11.0",
    "passport": "^0.3.2",
    "passport-facebook": "^2.1.1",
    "passport-local": "^1.0.0",
    "path": "^0.12.7",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0",
    "validator": "^6.2.1",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "nodemon": "^1.11.0",
    "webpack": "^2.2.1"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
  // the entry file for the bundle
  entry: path.join(__dirname, '/client/src/app.js'),

  // the bundle file we will get in the result
  output: {
    path: path.join(__dirname, '/client/dist/js'),
    filename: 'app.js',
  },

  module: {

    // apply loaders to files that meet given conditions
    loaders: [{
      test: /\.js$/,
      include: path.join(__dirname, '/client/src'),
      loader: 'babel-loader',
      query: {
        presets: ["react", "es2015"]
      }
    }],
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  // start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
  watch: false
};

.babelrc

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

Answer 1

尝试将启动脚本更改为“node server.js”而不是 nodemon。