crootfast/webProject/webPackServer/run.js

大前端工程化命令行脚手架

'use strict';
require("./common/alias");
console.log('run...');

const webpack = require("webpack");
const { merge } = require("webpack-merge");
// const inquirer = require("inquirer");
const WebpackDevServer = require("webpack-dev-server"); // https://github.com/webpack/webpack-dev-server/tree/master/
const colors = require("colors");
// const { setGlobal, getGlobal } = require("./common/utils/index");
const { frameConfigPath } = require("./common/utils/joinPath");
const { setGlobal, getGlobal } = require("../../common/utils/path");

// const root = getGlobal("cwd");
// const { pathJoin } = require(`${root}/common/utils/index`);

async function webpackRun() {
  // 如果直接输入了对应参数，则不用询问模式，后期考虑做成可视化的启动方案。
  if (process.env.npm_config_appname) {
    setGlobal("appname", process.env.npm_config_appname);
  }
  if (process.env.npm_config_env) {
    setGlobal("env", process.env.npm_config_env);
  }
  if (process.env.npm_config_frame) {
    setGlobal("frame", process.env.npm_config_frame);
  }

  // 开发模式下的webpack配置
  const WebpackDevelopConfig = require("./config/develop");
  try {
    const appname = getGlobal('appname');
    const env = getGlobal('env');
    const frame = getGlobal('frame');
    // 加载对应框架的配置
    const frameConfig = require(frameConfigPath(frame));
    const compiler = webpack(merge(WebpackDevelopConfig, frameConfig));
    const devServerOptions = { ...WebpackDevelopConfig["devServer"] };
    const webpackServer = new WebpackDevServer(devServerOptions, compiler);

    webpackServer.startCallback(async (err) => {
      if (err) {
        console.log(err);
      }

      console.log(
        // merge(webpackDevelop, frameConfig),
        "\n",
        colors.blue(`您运行的代理环境是：${env}，项目是：apps/${frame}/${appname}，技术框架是：${frame}。`),
        "\n",
        "\n",
        colors.green(`现在您可以打开地址访问您的应用了！`),
        "\n"
      );
      // const localIPv4 = WebpackDevServer.internalIPSync('v4');
      // const localPort = await WebpackDevServer.getFreePort();
    });

  } catch (err) {
    if (err.isTtyError) {
      // Prompt couldn't be rendered in the current environment
      throw Error(colors.red("Prompt couldn't be rendered in the current environment: " + err));
    } else {
      // Something else went wrong
      throw Error(colors.red("Something else went wrong: " + err));
    }
  }
};
webpackRun();

// async function inquirerPrompt() {
//   return await inquirer.prompt([
//     {
//       type: "list",
//       message: "请选择你使用的框架",
//       name: "Frame",
//       default: "react",
//       choices: [
//         "react"
//       ]
//     },
//     {
//       type: "input",
//       message: "请输入项目，例如：demo；",
//       name: "Project",
//       default: "demo"
//     },
//     {
//       type: "list",
//       message: "请选择依赖的服务器环境",
//       name: "ProxyEnv",
//       default: "test",
//       choices: [
//         "test",
//         "stating",
//         "production"
//       ]
//     }
//   ]);
// };