Question

更新

好的，所以我更新了Procfile以将我的组件捆绑在一起

Procfile

web: npm run build-client && node server/index.js

但现在我的应用程序加载需要很长时间，因为捆绑需要很长时间。有一个更好的方法吗？这是一种糟糕的用户体验

... 如果没有别的，有没有办法立即呈现一个静态页面：

责怪Heroku，不是我

======原创背景=======

我的应用程序与heroku local＆amp; localhost:8080，我的视图无法在部署heroku open上呈现。从控制台，我收到此错误消息：

app.bundle.js:1 Uncaught SyntaxError: Unexpected token <

此特定包包含我的React组件。我使用带有webpack的codesplit在不同的时刻加载依赖项，因为我在前端使用vr框架（aframe / three.js）并做出反应。我不明白为什么会发生这种情况，如果它在当地工作得很好。

的index.html

我在index.bundle内部通过aframe /三个组件对一些JS模块进行了代码分析。我的所有反应组件都在app.bundle 之内

<head>
  <meta charset="utf-8">
  <title>Faceoff!</title>
  <script src="./commons.js"></script>
  <script src="./index.bundle.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
  <style> ... </style>
</head>

<body>
  <div id="app"></div>
  <script src="./app.bundle.js" defer></script> 
</body>

webpack.config.js

'use strict'
const webpack = require('webpack')
const path = require('path')

const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: 'commons.js'
})

const config = {
  context: path.resolve(__dirname, 'client'),
  entry: {
    index: './index.js',
    app: './app.jsx'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /jsx?$/,
        include: path.resolve(__dirname, 'client'),
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: [
    extractCommons
  ]
};

module.exports = config

index.js

应用的服务器端代码。我已经看到其他人在这个大致的位置上发现了他们的错误，所以我会把它放在一边。

'use strict'
const express = require('express');
const path = require('path');
const app = express();

const production = process.env.NODE_ENV === 'production';
const port = production ? process.env.PORT : 8080;

var publicPath = path.resolve(__dirname, '../public');

app.use(express.static(publicPath));

app.use('/', (req, res, send) => {
  res.sendFile(path.resolve(__dirname, '..', 'index.html'))
})

app.listen(port, () => {
 console.log(`Virtual Reality Enabled On Port ${port}`);
});

Answer 1

如果您的npm脚本build-client构建了您的webpack包。阅读你的webpack.config.js告诉我，这些包将位于一个名为public的目录中，你的所有文件名都将以.bundle.js作为后缀。因此，您应该将Procfile更改为web: npm run build-client && node public/index.bundle.js

Express / React应用程序在本地运行，但不适用于Heroku

1 个答案: