在本地反应应用程序构建，而不是通过 Firebase答案

【问题标题】：React app building locally, not via Firebase在本地反应应用程序构建，而不是通过 Firebase
【发布时间】：2016-08-12 17:06:31
【问题描述】：

我完成了一个 React 应用程序，并希望将其部署到 Firebase 以进行托管（存储也是如此，但首先要做的是）。我的 Webpack localhost 设置运行良好，但是当我使用 Firebase 部署和加载时，我得到一个白屏：

client.min.js:1 Uncaught SyntaxError: Unexpected token <

那条线上没有尖括号。我已经包含了我的错误消息、firebase HTML（[my-company] 在我的代码中是一个不同的字符串）和 webpack.config.js：

<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-storage.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCFRYmS3bFScffCG8Ko7QRieDWExeaa_yE",
    authDomain: "[mycompany]-records.firebaseapp.com",
    databaseURL: "https://[mycompany]-records.firebaseio.com",
    storageBucket: "[mycompany]-records.appspot.com",
  };
  firebase.initializeApp(config);
</script>

webpack.config.js：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: [
            'react-html-attrs', 
            'transform-class-properties', 
            'transform-decorators-legacy'
          ],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

【问题讨论】：

你用 babel 转译了代码吗？你是怎么编译 jsx 的？
我正在使用 Webpack。它会在我保存的任何时候重建 client.min.js。
这不是我的问题 ;) - 检查构建的 js 文件，看看 jsx 是否还在。
我的错。看起来不像。如果是的话，它就不会在本地构建，对吧？
好吧，看起来确实像...babel 在 webpack 配置中，带有 react 预设。

标签： javascript facebook reactjs firebase firebase-hosting

【解决方案1】：

解决方案：

我在 Webpack 配置中的输出目录有误。

当 Firebase 去寻找缩小的 JS 源时，它没有找到。

如果 Firebase 找不到 JS 文件，它会自动加载根 HTML 文件。这就是开尖括号的由来。

万岁！

【讨论】：