1

我正在使用 webpack 来捆绑/转换 jsx。

从命令行我正在运行“webpack --watch”。这将创建我的包而没有错误。这是我的 webpack 配置和 Application.js

'use strict';
var webpack = require('webpack');

module.exports = {
    resolve: {
        extensions: ['', '.js']
    },
    devtool: 'eval',
    entry: './client.js',
    output: {
        path: __dirname+'/build/js',
        filename: 'client.js'
    },    
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' }
        ]
    }
};

var React = require('react'),
    classSet = require('react/addons'),
    Nav = require('./Nav.js'),
    Home = require('./Home.js'),
    Recipe = require('./Recipe.js'),
    RecipeArchive = require('./RecipeArchive.js'),
    About = require('./About.js'),
    Timestamp = require('./Timestamp.js'),
    RouterMixin = require('flux-router-component').RouterMixin;

var Application = React.createClass({
    mixins: [RouterMixin],
    getInitialState: function () {
        this.store = this.props.context.getStore('ApplicationStore');
        return this.store.getState();
    },
    componentDidMount: function () {
        var self = this;
        self._changeEventListener = function () {
            var state = self.store.getState();
            self.setState(state);
        };
        self.store.on('change', self._changeEventListener);
    },
    componentWillUnmount: function () {
        var self = this;
        self.store.removeListener('change', self._changeEventListener);
        self._changeEventListener = null;
    },
    render: function () {

        return (
            <div>test</div>
        );
    }
});

module.exports = Application;

然后我正在运行引发错误的节点服务器。

node server.js

结果是：

/Users//Documents/routing/components/Application.js:39
        <div>test</div>
        ^
SyntaxError: Unexpected token <

我应该如何运行我的项目以允许我在我的 .js 文件中包含 jsx/harmony？

更新：解决方案

正如 Brandon 所指出的，我需要在 Node.js 中使用 node-jsx 进行转换。在我添加的 server.js 文件的顶部，一切正常：

require('node-jsx').install({ extension: '.js', harmony: true });
4

1 回答 1

2

Webpack 只是创建一个客户端包；当您运行 Node 应用程序时，它不会使用 webpack 来加载文件。以前，您可以使用类似node-jsx 的东西来要求 Node.js 中的 JSX 文件，但该项目已被弃用，取而代之的是Babel。特别是，您可以使用babel-register在 Node.js 中要求 JSX 文件。

于 2014-11-18T19:46:53.700 回答