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

Question

After adding SSR to my app, I ended up using some ES6 in my server's index.js file, and now I'm having a problem getting it to run on Heroku again.

I've done a lot of research and understand that using ES6 requires babel to transpile the server file, but pretty much everyone's recommendations I can find typically ended up with requiring the .babelrc file, or specifying/installing the presets, but from what I can tell, I've already done this.

I'm finding that the more I try to troubleshoot this, the more confused I'm becoming, so I wanted to reach out on here for some discussion :) thanks everyone (Full code: https://github.com/trm313/mern-boiler )

Heroku errors

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

Of the following scripts, "npm run start" works fine locally, but fails when uploaded to Heroku. It complains that I need to use the 'babel-cli' package instead of 'babel', which I'm already doing.. (Same for "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。