javascript - react 意外 token <

Question

我正在处理 react router tutorial使用我自己的自定义 webpack 构建，我收到“意外 token <”错误。这通常是由于 babel transpiler being incorrectly specified .然而，这里不是这种情况。我的转译器在开发构建期间按照指定的方式工作，但在生产构建的相同设置下失败。我不知道为什么。

我的 .babelrc 文件有正确的预设:

...
"presets": ["es2015", "stage-0", "react"]
...

我的 webpack.config.js 使用它来为开发人员转译:

loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel?cacheDirectory=' + PATHS.cache],
        exclude: PATHS.node_modules
    }...

我的 webpack.config.js 使用它来为产品转译:

loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: PATHS.node_modules,
    }...

我的 package.json 有所有正确的库:

...
"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.2.5",
  "babel-plugin-transform-runtime": "^6.12.0",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-react-hmre": "^1.1.1",
  "babel-preset-stage-0": "^6.0.15",
...
"dependencies": {
  "react": "^0.14.6",
  "react-d3-wrap": "^2.1.2",
  "react-dom": "^0.14.6",
  "react-redux": "^4.4.5",
  "react-router": "^2.7.0",
...

奇怪的是，Chrome 报告 index.html 中的 html 实际上替换了主要的 .js 文件。因此错误。

但是，直接检查文件会发现情况并非如此:

您可以找到构建的 repo here

知道这里会发生什么吗？

编辑:当我的服务器请求 bundle 时，它会返回 html。所以也许 prod-server 有问题:

var express = require('express');
var path = require('path');
var compression = require('compression');

var app = express();

app.use(express.static(path.join(__dirname, 'dist')));

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

var PORT = process.env.PORT || 8080;
app.listen(PORT, function () {
    console.log("Production express server running at localhost: " + PORT)
});

EDIT2:我在这里解决请求的方式有问题。如果我删除:

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

然后我可以向 bundle 发送请求并取回 bundle 。有了这一行，发送请求以获取包返回 index.html。

Answer 1

正如 agmcleod 所建议的，我需要更改我的快速路由器处理请求的方式:get('*', ... 需要切换到 get('/', . ..。此外，我需要将我的 webpack 公共(public)路径更改为 '/' 而不是 path.join(__dirname, 'dist')。Webpack 将我的 src 属性中的完全限定目录，并没有使它们相对于我的 express 服务器中的静态路径。

引用的 repo 中还有其他问题，但我相信它们与发布的问题无关。

感谢@DavidTyron 和@agmcleod 让我走上正轨。