Question

工具：节点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"
  }
}

问题：

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

Answer 1

看看Webpack Isomorphic Tools。它是一个帮助模块，您可以添加到您的webpack配置中，以便您可以在节点中执行ES6导入或常规旧需求，并且它会做一些魔术并且需求将成功解决。

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

编辑：您可能会遇到一些警告：在节点中，window对象之类的东西不存在，所以如果您的任何节点模块使用它，它将引发异常当您尝试在服务器上呈现该特定库时。只需填充窗口对象和其他所需的东西。

Answer 2

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

只需运行命令

npm install babel-register --save

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

require("babel-register");

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

2 个答案: