0

node js アプリケーションで react を使用しようとしています。私が見つけた 1 つの方法は、react jsx ファイルを変換すると思われる babel-register を使用することでした。

ノードindex.jsにコードを入れました。

require('babel-register')({
   ignore:'node_modules',
   presets: ["es2015",'react', "stage-0"],
   extensions: [".es6", ".es", ".jsx", ".js"]
});

app.use('/static', express.static('public'));


app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/public/index.html');
});

const server = app.listen(9000, () => {
    let port = server.address().port;
    winston.info(`Server running at http://localhost:${port}`);
});

次に、react コードを public/index.js に配置します。

var React = require('react');
var ReactDom = require('react-dom');
class TodoApp extends React.Component {
    render() {
        return(
            <div>
                <h1>Heslssddddlo</h1>
            </div>
        )}
}
ReactDom.render(
    <div>
        <TodoApp></TodoApp>
    </div>
    , document.getElementById('app')
);

次に、このエラーが発生します。キャッチされていない SyntaxError: 予期しないトークン <

babel-register を使用するために必要なものはすべてインストールしたと思います...

"devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.11.6",

babel-register ではなく webpack を使用する必要がありますか、それとも間違っていますか?

4

1 に答える 1

0

babel register は、ファイルを「要求」してbabelにトランスパイルさせることができるようにするだけだと思います。Express.static を使用して、ファイルを「そのまま」提供するように Express に指示しているだけです。

静的を使用して、babel によって既に処理されたファイルを提供するか、それを要求する必要があります。React Express ビュー ライブラリのいくつかを調べることができます。

于 2016-07-28T16:52:50.607 に答える