使用 webpack（BabelJS）第 2 部分转译后反应应用程序未呈现答案

【问题标题】：React app not rendering after transpiling with webpack (BabelJS) part 2使用 webpack（BabelJS）第 2 部分转译后反应应用程序未呈现
【发布时间】：2016-12-29 14:48:33
【问题描述】：

这篇文章是我的previous post 在同一问题上的扩展。我的反应代码仍未呈现，但我从故障排除工作中收集了新信息：

1) 上一篇文章的响应者让我的代码在他的环境中工作。为了匹配他的环境，我下载了 babel-core、babel-loader 和 babel-preset-2015。我还更改了 webpack.config.js 的版本：

module.exports = {
    context: __dirname, 
    entry: "./src/App.js",

    output: {
        filename: "app.js",
        path: __dirname + "/assets"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015"]
                }
            }
        ]
    }
}

2）问题与服务器无关，因为heroku成功下发了所有文件。

3) 这不是与浏览器相关的问题，因为该应用无法在 Chrome、Firefox 和 Safari 中呈现。

我能想到的就是这个问题与webpack/babel有关，但是你们还有其他想法吗？？

【问题讨论】：

你的静态资源加载到浏览器了吗？
我的 html 加载，但不是我的 javascript。收到的 javascript 状态为 200，但它没有重组 DOM 以添加反应组件。

标签： javascript reactjs heroku

【解决方案1】：

从转到网址：https://dry-river-67944.herokuapp.com/

您的 js 文件似乎没有被发送下来。相反，/:input 的获取请求处理程序正用于该请求。

app.get("/:input", (req, res) => {
    //Assign headerVal to Access-Control-Allow-Origin response header
    res.set('Access-Control-Allow-Origin', "*")

    //Send response data
    var convertedData = timestampMicroServ(req.params.input)
    res.end(convertedData)
})

应该放在你的静态文件中间件之后或命名空间（/api/:input?）：

app.get("/", express.static(path.join(__dirname, '/TMS-Front-End/assets')))

【讨论】：