@wgoo/cli/lib/compiler/compile-site.js

Wgoo Cli 是一个 React 组件库构建工具，通过 Wgoo Cli 可以快速搭建一套功能完备的 React 组件库。

const get = require('lodash.get');
const chalk = require('chalk');
const address = require('address');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const { getPort } = require('portfinder');
const { GREEN } = require('../common/constant');
const { getSiteDevConfig } = require('../config/webpack.site.dev');
const { getSitePrdConfig } = require('../config/webpack.site.prd');

function logServerInfo(port) {
  const local = `http://localhost:${port}`;
  const network = `http://${address.ip()}:${port}`;

  console.log('\n  Site running at:\n');
  console.log(`  ${chalk.bold('Local')}:    ${chalk.hex(GREEN)(local)} `);
  console.log(`  ${chalk.bold('Network')}:  ${chalk.hex(GREEN)(network)}`);
}

function runDevServer(port, config) {
  const server = new WebpackDevServer(webpack(config), config.devServer);

  // this is a hack to disable wds status log
  server.showStatus = function () {};

  const host = get(config.devServer, 'host', 'localhost');
  server.listen(port, host, (err) => {
    if (err) {
      console.log(err);
    }
  });
}

function watch() {
  const config = getSiteDevConfig();

  getPort(
    {
      port: config.devServer.port,
    },
    (err, port) => {
      if (err) {
        console.log(err);
        return;
      }

      logServerInfo(port);
      runDevServer(port, config);
    }
  );
}

function build() {
  return new Promise((resolve, reject) => {
    const config = getSitePrdConfig();

    webpack(config, (err, stats) => {
      if (err || (stats && stats.hasErrors())) {
        reject();
      } else {
        resolve();
      }
    });
  });
}

async function compileSite(production = false) {
  if (production) {
    await build();
  } else {
    watch();
  }
}

module.exports = { compileSite };