Vite 源码提取 ①

[yuxino]

原标题是~Vite 源码分析~，但是我仔细想想，我感兴趣的只有一小部分是实现吧，毕竟实现并不是很复杂，大部分还是想从Vite里挖出来一些实际有用的东西，感受一下尤大的coding风格，思路。

其实我们不太需要 commander 之类的工具

日志处理之类的，参数处理之类的其实没多复杂。我们有时候并不需要 commander 之流。其实我觉得 commander 有点重 ..

`
Usage: vite [command] [args] [--options]

Commands:
  vite                       Start server in current directory.
  vite serve [root=cwd]      Start server in target directory.
  vite build [root=cwd]      Build target directory.

Options:
  --help, -h                 [boolean] show help
  --version, -v              [boolean] show version
  --config, -c               [string]  use specified config file
  --serviceWorker, -sw       [boolean] configure service worker caching (default: false)
  --port                     [number]  port to use for serve
  --open                     [boolean] open browser on server start
  --base                     [string]  public base path for build (default: /)
  --outDir                   [string]  output directory for build (default: dist)
  --assetsDir                [string]  directory under outDir to place assets in (default: assets)
  --assetsInlineLimit        [number]  static asset base64 inline threshold in bytes (default: 4096)
  --sourcemap                [boolean] output source maps for build (default: false)
  --minify                   [boolean | 'terser' | 'esbuild'] enable/disable minification, or specify
                                       minifier to use. (default: 'terser')
  --mode, -m                 [string]  specify env mode (default: 'development' for dev, 'production' for build)
  --ssr                      [boolean] build for server-side rendering
  --jsx                      ['vue' | 'preact' | 'react']  choose jsx preset (default: 'vue')
  --jsx-factory              [string]  (default: React.createElement)
  --jsx-fragment             [string]  (default: React.Fragment)
`

几个switch就搞定了主要的几个server,build之类的命令。minimist这个库属实太好用了。

检查本地ip和网络ip

const os = require("os");

const protocol = "https";
const port = "8080";

// 运行端口host打印
const interfaces = os.networkInterfaces();
// 处理 IPV4
Object.keys(interfaces).forEach((key) => {
  (interfaces[key] || [])
    .filter((details) => details.family === "IPv4")
    .map((detail) => {
      return {
        type: detail.address.includes("127.0.0.1") ? "Local:   " : "Network: ",
        host: detail.address.replace("127.0.0.1", "localhost"),
      };
    })
    .forEach(({ type, host }) => {
      const url = `${protocol}://${host}:${port}/`;
      console.log(`  > ${type} ${url}`);
    });
});

效果 Like this

处理dotenv

这一段属于提炼出来的东西。可以这样轻松地给应用程序设置上环境变量。仅需加入到package.json的scripts里，通过set-env [xxx]来修改管理环境变量。

const { exec } = require("child_process");
const dotenv = require("dotenv");
const env = {};

const mode = process.env.MODE;

const files = [".env", `.env.${mode}`];

files.forEach((file) => {
  const { parsed } = dotenv.config({ path: `${__dirname}/${file}` });
  Object.assign(env, parsed);
});

let keys = Object.keys(env);

keys = keys.map((key) => {
  return `${key}=${env[key]}`;
});

exec(
  `${keys.join(" ")} ${process.argv.splice(2).join(" ")}`,
  (error, stdout, stderr) => {
    if (error) {
      console.error(`exec error: ${error}`);
      return;
    }
    console.log(`stdout: ${stdout}`);
    console.error(`stderr: ${stderr}`);
  }
);

KOA 套娃

TODO: ///

[yuxino]

忙的一笔。没时间看了