Question

我正在尝试在节点js应用程序中使用react。我找到的一种方法是使用babel-register，它可以转换反应jsx文件。

我把代码放在node 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}`);
});

然后我将反应代码放在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：意外的令牌＆lt;

我相信我安装了使用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",

我是否必须使用webpack而不是babel-register，否则我做错了？

Answer 1

我认为babel注册只是让它可以'需要'一个文件并让babel转发它。您只是告诉express使用express.static“按原样”提供文件。

您需要使用静态来提供已经由babel处理过的文件，或者需要它。您可能想要查看一些反应快速视图库。

babel-register无法改变反应

1 个答案: