節點/陣營：節點未能解析同構組件

Question

工具ES6語法：節點5.4.0，快速4.13.4，陣營0.14.7，的WebPack 14年1月12日

問題：

在過去幾個月裏，Node和Babel都進行了主要更新，因此我無法理順如何配置Node來解析ES6語法中編寫的同構組件。

錯誤：

客戶端呈現（通過捆綁的WebPack）的工作，但服務器端渲染過程中，我得到這個問題

進口MyComponent的從」 ./components/ ^^ ^^^^ 語法錯誤：意外的令牌進口

背景 - 事情我做：

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

問：

一旦我換了所有的「進口」語法節點需要聲明我是能夠成功地使服務器端。但我真的不喜歡避免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");