1

webpack 和 Fluxible 的新手，所以我试图了解他们的入门样板： http: //fluxible.io/quick-start.html

在此处输入图像描述

运行npm run dev正常并启动实时重载网络服务器，但我对如何在生产中运行它感到困惑。查看 package.json

  "scripts": {
    "build": "webpack & webpack --config webpack.config.production.js",
    "dev": "node webpack-dev-server.js & PORT=3001 nodemon start.js -e js,jsx",
    "lint": "eslint ./*.js ./**/*.js",
    "start": "node start.js"
  }

我假设我会运行npm run build它似乎在生产配置模式下运行 webpack 并将 js 文件复制到/build文件夹中。此时如果我运行 npm start，它运行start.js的只是指向server.js并且服务器在没有开发热加载的情况下运行。

我的问题是：为什么应用程序在运行我假设处于生产模式时仍继续进行轮询（我假设是套接字或轮询以运行开发热加载器）。我在日志中看到了这一点：

  express:router dispatching GET /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +3s
  express:router query  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +1ms
  express:router expressInit  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router compression  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router jsonParser  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms

在生产服务器上，我只是部署整个根文件夹还是我应该只部署构建文件夹......如果是这样，构建文件夹会丢失一些东西。

静态资产是否应该复制到构建文件夹中 - 就像 express 中的 /public 文件夹？

开始.js

require('babel/register');
module.exports = require('./server');

服务器.js

import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import path from 'path';
import serialize from 'serialize-javascript';
import {navigateAction} from 'fluxible-router';
import debugLib from 'debug';
import React from 'react';
import ReactDOM from 'react-dom/server';
import app from './app';
import HtmlComponent from './components/Html';
import { createElementWithContext } from 'fluxible-addons-react';
const env = process.env.NODE_ENV;

const debug = debugLib('fluxible');

const server = express();
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use(compression());
server.use(bodyParser.json());

server.use(async (req, res, next) => {
    const context = app.createContext();

    debug('Executing navigate action');

    try {
        await context.getActionContext().executeAction(navigateAction, {
            url: req.url
        });


        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const markup = ReactDOM.renderToString(createElementWithContext(context));
        const htmlElement = React.createElement(HtmlComponent, {
            clientFile: env === 'production' ? 'main.min.js' : 'main.js',
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');
        res.write('<!DOCTYPE html>' + html);
        res.end();
    } catch (err) {

        if (err.statusCode && err.statusCode === 404) {
            // Pass through to next middleware
            next();
        } else {
            next(err);
        }

    }

});


const port = process.env.PORT || 3000;
server.listen(port);
console.log('Application listening on port ' + port);

export default server;
4

0 回答 0