singod/packx-demo

packx-demo

开发

yarn start h5
yarn start pc

构建

yarn build h5
yarn build pc

ssr

构建 ssr commonjs2 lib 定义入口 index.ssr.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import H5App from './h5/App';
import PcApp from './pc/App';

export const h5 = () => {
  return ReactDOMServer.renderToString(<H5App />);
};

export const pc = () => {
  return ReactDOMServer.renderToString(<PcApp />);
};

定义 html 模板（注意 -html 用?为了避免和 html-webpack-plugin 冲突）

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title></title>
  </head>
  <body style="font-size: 14px">
    <div id="root"><?-html?></div>
  </body>
</html>

静态资源构建

const path = require('path');
const chalk = require('chalk');
const { default: packx } = require('packx');

packx(
  false,
  {
    entry: {
      h5: './src/h5/index',
      pc: './src/pc/index',
      index: './src/demo/index',
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '',
    },
  },
  () => {
    console.log(chalk.yellowBright('static assets build successfully'));
  },
);

定义 node webserver, 下面以 express 为例 packx.server.js

const express = require('express');
const app = express();
const path = require('path');
const { h5, pc } = require('./ssr-lib/index');
app.disable('x-powered-by');
app.enable('trust proxy');

app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.set('views', path.resolve(__dirname, 'dist'));

const distRoot = path.resolve(__dirname, 'dist');

app.get(/\.html?/, (req, res, next) => {
  res.redirect('/');
});

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

app.get(/\/h5/, (req, res, next) => {
  // h5() get h5 ssr content
  res.render('h5', { html: h5(), delimiter: '?' }, (err, str) => {
    if (err) {
      throw err;
    }
    res.send(str);
  });
});

app.get(/\//, (req, res, next) => {
  // pc() get pc ssr content
  res.render('pc', { html: pc(), delimiter: '?' }, (err, str) => {
    if (err) {
      throw err;
    }
    res.send(str);
  });
});

app.use((req, res) => {
  res.status(404).send('page not found');
});

app.use(function (err, req, res, next) {
  if (err) {
    res.status(500).send('server is down.');
  }
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.info(`==> 🍺  Express server running at localhost: ${PORT}`);
});

启动 server node pack.server.js
访问截图，包括 ssr 的 html 源码

singod / packx-demo

packx-demo

开发

构建

ssr

About

Languages