Node/React：节点无法解析同构组件的 ES6 语法

Question

工具：Node 5.4.0、Express 4.13.4、React 0.14.7、webpack 1.12.14

问题：

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

错误：

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

从 './components/ 导入 MyComponent ^^^^^^ SyntaxError：意外的令牌导入

背景——我做过的事情：

1) 更新了 Babel

我认为最新版本的 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) 创建了一个 .babelrc 文件

我不知道这个文件到底是做什么用的，但由于很多人使用它并提到它，我想我会把它扔在那里。

.babelrc

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

}

3) 更新的 Webpack 查询

我认为这只会影响客户端渲染，但我会提到我确实更新了 通过添加“预设”。

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"
  }
}

问题：

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

Answer 1

看看Webpack Isomorphic Tools。它是一个帮助模块，你可以添加到你的 webpack 配置中，这样你就可以在节点中执行 ES6 导入或常规的旧需求，它会发挥一些作用，并且需求会成功解决。

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

编辑：提醒您可能遇到的一些错误：在节点中，window 对象之类的东西不存在，因此如果您的任何节点模块使用它，当您尝试时它会抛出异常在服务器上呈现该特定库。只需填充窗口对象和您需要的任何其他内容。

Answer 2

Babel require hook 可以帮助 node.js 自动解析 ES6 语法，而 require 文件。

只需运行命令

npm install babel-register --save

并将以下内容添加到入口文件的第一行

require("babel-register");