Express Uncaught SyntaxError: Unexpected token <答案

【问题标题】：Express Uncaught SyntaxError: Unexpected token <Express Uncaught SyntaxError: Unexpected token <
【发布时间】：2017-06-15 21:05:18
【问题描述】：

我的 webpack-dev-server 工作得很好，但我想用 express.js 实现类似的东西。但是，我收到了 Uncaught SyntaxError: Unexpected token < 错误。

下面是我的 server.js：

const express = require('express');
const webpack = require('webpack');
const path = require('path');
const open = require('open');

const port = 3000;
const app = express();

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, '../app/index.html'));
});

app.listen(port, function (err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

下面是我的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Yes boy</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="transformed.js"></script>
</body>
</html>

Index.js 代码：

/* eslint-disable no-unused-vars */

import React from 'react';
const ReactDOM = require('react-dom');
const routes = require('./routes');
const GlobalCSS = require('./styles/main.scss');

/* eslint-disable no-unused-var */

ReactDOM.render(routes, document.getElementById('app'));

routes.js

const routes = ( // eslint-disable-line no-extra-parens
  <Router history={browserHistory} onUpdate={hashLinkScroll}>
    <Route path="/" component={App} />
    <Route path="nav" component={Nav} />
    <Route path="hero" component={Hero} />
    <Route path="about" component={About} />
    <Route path="/" component={Contact} />
    <Route path="footer" component={Footer} />
    <Route path="building" component={Building} />
    <Route path="*" component={NotFound} />
  </Router>
);

module.exports = routes;

我的文件夹结构如下：

project
  app/
    components/
      App.js
    index.html
    index.js
    routes.js
  build/
    index.html
    transformed.js
  tools/
    server.js
  webpack.config.js

如果你们有任何建议，请告诉我。

谢谢！

【问题讨论】：

您应该包含 index.js 文件的代码，我假设该文件已内置到transformed.js 中？
我认为问题出在这一行：res.sendFile(path.join(__dirname, '../app/index.html'));你加入了当前dirname，路径为index.html文件，n文件在那个地方不存在，你直接使用这个：@ 987654330@
更新了我的问题@AndrewFont
@MayankShukla 我自己认为根本问题一定出在这条线上。不过我可能错了。我已经尝试了您的建议，但没有收到 TypeError: path must be absolute or specify root to res.sendFile Internal Server Error
试试这个，把你的server.js文件放在tool文件夹之外，我的意思是这样的：project/server.js然后使用这一行res.sendFile(path.join(__dirname, './app/index.html'));如果问题是因为它将得到解决:)

标签： reactjs express webpack webpack-dev-server

【解决方案1】：

好的，现在一切正常。问题在于我的资产不是从记忆中提供的。就我而言，解决方案是使用webpack-dev-middleware。

这是我添加到 server.js 的内容：

app.use(require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath }));

compiler 是你的 webpack 导出：

const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config);

publicPath 应该指向您的 output 在您的 webpack.config 中，这样您就可以获得您的资产：

output: { path: path.join(__dirname, 'build'), publicPath: '/', filename: 'transformed.js' },

【讨论】：