如何在生产中使用webpack和节点（反应前端）将es5编译为es6？

Question

我试图使用require钩子来使用Babel来编译从es5到es6的文件。不幸的是，在运行npm install babel-register --save-dev之后，它仍然无法找到模块。

$ heroku logs
2017-09-10T00:52:40.511160+00:00 app[web.1]: Error: Cannot find module 'babel-register'
2017-09-10T00:52:40.511161+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:469:15)
2017-09-10T00:52:40.511162+00:00 app[web.1]:     at Function.Module._load (module.js:417:25)
2017-09-10T00:52:40.511163+00:00 app[web.1]:     at Module.require (module.js:497:17)
2017-09-10T00:52:40.511163+00:00 app[web.1]:     at require (internal/module.js:20:19)
2017-09-10T00:52:40.511164+00:00 app[web.1]:     at Object.<anonymous> (/app/src/server.js:2:1)
2017-09-10T00:52:40.511164+00:00 app[web.1]:     at Module._compile (module.js:570:32)
2017-09-10T00:52:40.511165+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:579:10)
2017-09-10T00:52:40.511165+00:00 app[web.1]:     at Module.load (module.js:487:32)
2017-09-10T00:52:40.511166+00:00 app[web.1]:     at tryModuleLoad (module.js:446:12)
2017-09-10T00:52:40.511166+00:00 app[web.1]:     at Function.Module._load (module.js:438:3)

我的server.js文件仅为es5保留，然后需要index.js，其中包含es6中所有导入的组件。

// server.js

// only ES5 is allowed in this file

require("babel-register")({
  presets: [ 'es2015' ]
});

var app = require("./index.js");

我错过package.json中的任何内容吗？

// package.json
{
  "name": "youtube-instant-search",
  "version": "1.0.0",
  "description": "Renders youtube videos after keystrokes",
  "main": "index.js",      
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "build": "babel src -d build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "@types/react-addons-create-fragment": "^0.14.17",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "prop-types": "^15.5.10",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-intl": "^2.3.0",
    "react-redux": "^4.0.0",
    "redux": "^3.0.4",
    "youtube-api-search": "0.0.5"
  }
}

这是webpack配置文件

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname,
    publicPath: "/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {        
        exclude: /node_modules/,
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ],
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
    }]
  },
  resolve: {
    extensions: ["", ".js", ".jsx"]
  },
  devServer: {
    contentBase: "./"
  }
};

什么似乎是我的问题？

修改

显然，babel-register is not ready for production。什么是我的选择？如何将es5编译为es6以便可以投放生产？我是否可以仅使用webpack和node？

执行此操作