包含服务器代码的react类的Webpack配置

Question

我有一个同构的react/flux (alt)实现。

我正在尝试将项目从browserify转换到webpack。

考虑到我的React类可能是这样的：

var dataAccess = require('../server/data-access');

var MyReactClass = React.createClass({

statics: {
    /**
     * This gets called by the containing component, so that each class
     * handles its own data fetching.
     * This part is obviously irrelevant in the client since the 
     * fetching is only done server-side and the result is used
     * to populate the Alt.js store
     */
    getData: function () {

        return dataAccess.fetchData(
        );

    }
}...

我想避免在运行webpack时捆绑整个“服务器”文件夹，但当我这样做时(通过在加载器配置中排除)，事情以一种奇怪的方式中断：

 ERROR in ./react/react-routes.js
Module parse failed: C:\project\react\react-routes.js Line 19: Unexpected token <
You may need an appropriate loader to handle this file type.
| var routes = (
|
|     <Route name="App" path="/" handler={App}>
|
|         <DefaultRoute name="Default Route" handler={Main}/>
 @ ./client/index.js 5:18-50

如果我返回"server“，我在转换mongojs的依赖项("net”等等)时会收到错误，我不认为这是正确的方向。

如果我删除了react-routes.js中对react类的所有要求，那么webpack就能够成功完成。从这一点上，我明白问题确实在于我的类中有服务器代码。

在browserify中，通过在函数getData()中使用对“数据访问”和其他服务器文件的要求，我能够克服这一点，但在使用webpack时，我到目前为止还没有运气。

我的忽略/排除规则应该是什么?我应该如何实现它们？

谢谢。

Answer 1

如果你在Webpack之外解决了这个问题呢？您可以先执行npm i babel --save-dev，然后在导入dataAccess位之前触发require('babel/register')。到那时，它将能够处理JSX。对我来说，这是最简单的解决方案。

Answer 2

适用于rest api的

• Webpack
• ES6
• Babel
• Eslint
• React
• Flux
• Json-server
• Complete CRUD操作