Node.js 节点/反应：节点无法解析同构组件的ES6语法

工具：节点5.4.0、Express 4.13.4、React 0.14.7、网页1.12.14

问题：

Node和Babel在过去的几个月里都进行了重大更新 所以我很难弄清楚如何配置节点来解析用ES6语法编写的同构组件

错误：

客户端渲染（由webpack捆绑）正在工作，但在服务器端渲染期间，我遇到了这个问题

从“./components”导入MyComponent/ ^^^^^^ SyntaxError:意外的令牌导入

背景-我做过的事情：

1） 更新巴别塔

我想Node的最新版本本机应该是解析ES6语法以进行导入，但既然没有，我想更新babel以 6.x就可以了

所以我更新了babel loader 6.2.4和其他依赖它的模块

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

2） 创建了一个.lrc文件

我不知道这个文件的确切用途，但由于很多人使用它并提到它，我想我会把它扔进去

.babelrc

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

}

3） 更新的网页查询

我想这只会影响客户端渲染，但我要说的是我确实更新了 通过添加“预设”

webpack.config.js

module.exports = {
  entry: "./js/app.js",
  output: {
    filename: "./public/js/bundle.js"
  },
  debug: true,
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query:{
          presets:['react','es2015']
        }
      }
    ]
  },

};

为了以防万一：

这是我的依赖项列表

{
  "name": "My App",
  "version": "0.0.1",
  "description": "Iso React Components",
  "main": "app.js",
  "dependencies": {
    "classnames": "^2.1.3",
    "express": "^4.13.3",
    "express-handlebars": "~1.1.0",
    "flux": "^2.0.0",
    "history": "^1.13.0",
    "html-webpack-plugin": "^2.9.0",
    "keymirror": "~0.1.0",
    "mongodb": "^2.1.3",
    "node-jsx": "~0.12.4",
    "object-assign": "^1.0.0",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-router": "^2.0.0",
    "react-scrollbar": "0.3.1",
    "reactify": "^1.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "envify": "^3.0.0",
    "jest-cli": "^0.4.3",
    "node-libs-browser": "^0.5.2",
    "uglify-js": "~2.4.15",
    "webpack": "^1.12.1"
  }
}

问题：

一旦我将所有“import”语法切换到Node require语句，我就能够成功地呈现服务器端。但我真的不喜欢避免ES6以使React代码节点/浏览器兼容的想法。我错过了什么？

看看。它是一个帮助器模块，您可以将其添加到您的网页配置中，以便您可以在节点中执行ES6导入或常规旧请求，它将发挥一些魔力，请求将成功解决

本质上，您可以创建一个同构配置（在网站上有详细说明），然后使用同构webpack插件，您可以使用它在客户端呈现您的资产（javascript、样式等）

编辑：请注意您可能遇到的一些错误：在节点中，像

窗口

对象这样的东西不存在，因此如果您的任何节点模块使用它，当您尝试在服务器上呈现特定库时，它将抛出异常。只需填充窗口对象和您需要的任何其他内容。

可以帮助node.js自动解析ES6语法，同时

需要
文件

只需运行命令

npm install babel-register --save

并将以下内容添加到条目文件的第一行

require("babel-register");

这与
require（'babel-core/register'）有很大不同？我尝试了
require（'babel-core/register'）在我的server.js文件中，它没有帮助。好的，尝试安装了“babel register”，导入时遇到了与express尝试调用
React.createFactory（require（'./js/components/MyComponent.React'）时相同的错误这里是错误-SyntaxError:exports.runInThisContext（vm.js:53:16）处意外的令牌导入…哦，我应该添加我也放了
require（“babel寄存器”）。