react-redux-boilerplate-scripts/bin/react-boilerplate-app-scripts-start.js

react-boilerplate-app-scripts

#!/usr/bin/env node --harmony
'use strict';

process.env.NODE_ENV = 'development';

const scriptsPackagename = 'react-boilerplate-app-scripts';

const path = require('path');
const fs = require('fs-extra');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const detect = require('detect-port');
const util = require('react-boilerplate-app-utils');
const paths = require(util.pathResolve('config/paths.js',__dirname,scriptsPackagename));
var proxy;
var proxyPath = util.pathResolve('config/proxy.js',__dirname,scriptsPackagename);
if(proxyPath){
  proxy = require(proxyPath);
}
var historyApiFallbackPath = util.pathResolve('config/historyApiFallback.js',__dirname,scriptsPackagename);
var historyApiFallback;
if(historyApiFallbackPath){
  historyApiFallback = require(historyApiFallbackPath);
}
const config = require(paths.webpackDevConfig);
const compiler = webpack(config);
const cwdPackageJsonConfig = util.getCwdPackageJson()[scriptsPackagename];
const host = cwdPackageJsonConfig.host || "localhost";
//port 可以被修改，会被占用
var port = cwdPackageJsonConfig.port || '8888'; 
//经过转换后的historyApiFallback rewrites
const rewrites = util.historyApiFallbackRewiriteAdapter(cwdPackageJsonConfig.rewrites);

function runDevServer(host, port) {
  var devServer = new WebpackDevServer(compiler, {
    //开启HTML5 History API，所有请求都重定向到index.html（地址重写）
    historyApiFallback: historyApiFallback || {
      //开启终端请求日志
      verbose: true,
      rewrites: rewrites,
    },
    // 开启gzip功能
    compress: true,
    // 关闭WebpackDevServer输出信息
    // 但警告和错误信息不会被关闭 
    clientLogLevel: 'none',
    //静态文件
    contentBase: paths.appPublic,
    //开启热替换server
    hot: true,
    //跟webpack.config中publicPath相等，内存文件输出目录 
    publicPath: config.output.publicPath,
    //会关闭WebpackDevServer编译后所有的信息（包括错误警告信息），后续通过compiler.plugin('done',null)自定义信息
    quiet: true,
    //watch设置
    watchOptions: {
      ignored: /node_modules/
    },
    host: host || "localhost",
    proxy: proxy && proxy,
  });

  // 启动WebpackDevServer.
  devServer.listen(port, err => {
    if (err) {
      return console.log(err);
    }
    console.log()
    console.log('Starting server and compiling...');
    console.log()
  });
}

var isFirstCompile = true;
compiler.plugin('done', function(stats) {
  var messages = stats.toJson({}, true);
  var isError = messages.errors.length || messages.warnings.length;

  if (!isError) {
    console.log(chalk.green('Compiled successfully!'));
  }

  if (!isError && isFirstCompile) {
    console.log();
    console.info(chalk.cyan("==> 🌎  Listening on port %s. Open up http://"+host+":%s/ in your browser."), port, port);
    console.log();
    console.log('Production building,please use ' + chalk.cyan("`npm || yarn" + ' run build`') + '.');
    console.log();
    isFirstCompile = false;
  }

  // 展示错误信息 
  if (messages.errors.length) {
    console.log(chalk.red('faild to compile!'));
    console.log();
    messages.errors.forEach(message => {
      console.log(message);
      console.log();
    });
    return;
  }

  //展示警告信息 
  if (messages.warnings.length) {
    console.log(chalk.yellow('Compiled with warnings.'));
    console.log();
    messages.warnings.forEach(message => {
      console.log(message);
      console.log();
    });
  }
});

detect(port, (err, _port) => {
  if (err) {
    console.log(err);
  }
  if (port == _port) {
    runDevServer(host,port);
  } else {
    console.log(chalk.cyan(`port: ${port} was occupied, try port: ${_port}`));
    port = _port;
    runDevServer(host,_port);
  }
});