@yannick-z/modulo 0.2.0

package/src/config/preset/index.ts

@@ -0,0 +1,23 @@
+import type { OutputConfig } from "@rsbuild/core";
+import { preset_alias } from "./alias.ts";
+import { preset_dev_server_config } from "./dev-server.ts";
+import { preset_input_dirs, preset_output_dirs } from "./dirs.ts";
+import { default_html_config } from "./html.ts";
+import { preset_ui_libs } from "./libs.ts";
+import { preset_minify_config } from "./minify.ts";
+import { preset_url_config } from "./url.ts";
+import type { ExternalLibs } from "../externals.ts";
+
+export const preset_config = {
+  analyze: false, // 是否执行bundleAnalyze
+  define: {} as Record<string, string | boolean | number>, // 配置全局变量，用于打包时替换代码中的全局变量
+  dev_server: preset_dev_server_config,
+  externals: {} as ExternalLibs,
+  html: default_html_config,
+  input: preset_input_dirs,
+  minify: preset_minify_config as OutputConfig["minify"], // 是否压缩产物，同时进行mangle
+  output: preset_output_dirs,
+  ui_lib: preset_ui_libs,
+  url: preset_url_config,
+  alias: preset_alias,
+};

package/src/config/preset/libs.ts

@@ -0,0 +1,5 @@
+export const preset_ui_libs = {
+  // 对ui库做严格的版本限制，以提高统一程度
+  react: '17.0.2',
+  vue: '2.7.16',
+};

package/src/config/preset/minify.ts

@@ -0,0 +1,24 @@
+import type { OutputConfig } from "@rsbuild/core";
+
+export const preset_minify_config: OutputConfig["minify"] = {
+  js: true,
+  jsOptions: {
+    minimizerOptions: {
+      compress: {
+        dead_code: true,
+        defaults: false,
+        toplevel: true,
+        unused: true,
+      },
+      format: {
+        comments: "some",
+        ecma: 2015,
+        preserve_annotations: true,
+        safari10: true,
+        semicolons: false,
+      },
+      mangle: true,
+      minify: true,
+    },
+  },
+};

package/src/config/preset/url.ts

@@ -0,0 +1,4 @@
+export const preset_url_config = {
+  base: '/', // 前缀路径
+  cdn: '', // 可以将除了html资源以外的资源都部署到cdn上，比如https://cdn.host.com/，或者https://cdn.host.com/cdn-path/
+};

package/src/config/type.ts

@@ -0,0 +1,17 @@
+import type { preset_config } from "./preset/index.ts";
+
+export type GLOBAL_CONFIG = typeof preset_config;
+
+export interface USER_CONFIG {
+  analyze?: boolean;
+  define?: GLOBAL_CONFIG["define"];
+  dev_server?: Partial<GLOBAL_CONFIG["dev_server"]>;
+  externals?: GLOBAL_CONFIG["externals"];
+  html?: Partial<GLOBAL_CONFIG["html"]>;
+  input?: Partial<GLOBAL_CONFIG["input"]>;
+  minify?: Partial<GLOBAL_CONFIG["minify"]> | boolean;
+  output?: Partial<GLOBAL_CONFIG["output"]>;
+  ui_lib?: Partial<GLOBAL_CONFIG["ui_lib"]>;
+  alias?: GLOBAL_CONFIG["alias"];
+  url?: Partial<GLOBAL_CONFIG["url"]>;
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import { get_args } from "./args/index.ts";
+import { init_tool } from "./cli/init.ts";
+import { pack_code } from "./cli/pack-code.ts";
+
+export function exec() {
+  const args = get_args();
+
+  if (args.cmd === "init") {
+    init_tool(args);
+  } else if (args.cmd === "build" || args.cmd === "dev") {
+    pack_code(args);
+  }
+}

package/src/initiator/create-config-file.ts

@@ -0,0 +1,46 @@
+// 在当前目录创建一份json配置文件
+import { existsSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import readline from "node:readline";
+import picocolors from "picocolors";
+import type { ModuloArgs_Init } from "../args/index.ts";
+import {
+  default_config_file_name,
+  get_example_config,
+} from "../config/example/example-config.ts";
+
+export async function create_config_file(args: ModuloArgs_Init) {
+  const path = args.init.path || default_config_file_name;
+  console.log(picocolors.blue("即将创建配置文件"), path);
+
+  const filepath = resolve(process.cwd(), path);
+
+  if (existsSync(filepath)) {
+    if (args.init.force) {
+      console.log(picocolors.bgRed(picocolors.white("配置文件已存在，将覆盖")));
+    } else {
+      console.log(picocolors.red("配置文件已存在，是否覆盖？"));
+      const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+      });
+      const answer = await new Promise<string>((resolve) => {
+        rl.question("\n请输入(Y/N) ", (answer) => {
+          rl.close();
+          resolve(answer);
+        });
+      });
+      if (answer.toLowerCase() !== "y") {
+        console.log("取消创建");
+        return;
+      }
+    }
+  }
+
+  writeFileSync(
+    filepath,
+    JSON.stringify(get_example_config(args.init.preset), null, 2)
+  );
+
+  console.log(picocolors.green("创建成功"), filepath);
+}

package/src/initiator/modify-scripts.ts

@@ -0,0 +1,52 @@
+import { writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import readline from "node:readline";
+import picocolors from "picocolors";
+import { get_packagejson } from "../config/index.ts";
+
+export const star_line = "**********************";
+
+export async function modify_scripts() {
+  const packagejson = get_packagejson();
+  const new_scripts = {
+    ...(packagejson.scripts || {}),
+    "build:page": "modulo build page",
+    "build:module": "modulo build module",
+    "build:all": "modulo build all",
+    build: "modulo build all",
+    "dev:page": "modulo dev page",
+    "dev:module": "modulo dev module",
+    "watch:page": "modulo build page --watch=true",
+    "watch:module": "modulo build module --watch=true",
+  };
+  console.log(
+    picocolors.magentaBright(
+      `\n${star_line}修改package.json中的scripts\n新的内容修改后如下:\n${JSON.stringify(
+        new_scripts,
+        null,
+        2
+      )}\n${star_line}`
+    )
+  );
+
+  // 确定是否修改package.json
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  const answer = await new Promise<string>((resolve) => {
+    rl.question("\n确定修改吗？请输入(Y/N) ", (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+  if (answer.toLowerCase() !== "y") {
+    console.log("取消修改");
+    return;
+  }
+
+  packagejson.scripts = new_scripts;
+  const new_packagejson = JSON.stringify(packagejson, null, 2);
+  writeFileSync(resolve(process.cwd(), "package.json"), new_packagejson);
+  console.log(picocolors.green(`\npackage.json修改成功`));
+}

package/src/packer/collect-modules.ts

@@ -0,0 +1,77 @@
+import { existsSync, readdirSync } from "node:fs";
+import { resolve } from "node:path";
+import picocolors from "picocolors";
+import { get_global_config } from "../config/index.ts";
+import { debug_log } from "../tools/debug-log.ts";
+import { get_framework_name } from "../tools/get-framework-name.ts";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+
+export function collect_modules(
+  args: ModuloArgs_Pack,
+  kind: "page" | "module"
+) {
+  const global_config = get_global_config(args);
+  const framework_name = get_framework_name();
+  const module_path = global_config.input[`${kind}s`];
+  const exist = existsSync(module_path);
+  debug_log(
+    picocolors.blue("check module_path"),
+    module_path,
+    exist ? "exists" : "NOT exists"
+  );
+  // 解析目录下的所有模块
+  const module_entries = !exist
+    ? []
+    : readdirSync(module_path, { withFileTypes: true })
+        .filter((item) => {
+          debug_log(
+            "checking module is directory",
+            item.name,
+            item.isDirectory()
+          );
+          return item.isDirectory();
+        })
+        // 每个模块都要求以index或者main或者文件夹同名命名
+        .map((dirent) => {
+          const dir_path = resolve(module_path, dirent.name);
+          const entry_file_path = [
+            resolve(dir_path, "index.ts"),
+            resolve(dir_path, "index.tsx"),
+            resolve(dir_path, "index.js"),
+            resolve(dir_path, "index.jsx"),
+            resolve(dir_path, "main.ts"),
+            resolve(dir_path, "main.tsx"),
+            resolve(dir_path, "main.js"),
+            resolve(dir_path, "main.jsx"),
+            // vue组件常常用vue文件作为入口，因此优先级高于同名ts和tsx文件
+            ...(framework_name === "vue"
+              ? [
+                  resolve(dir_path, "index.vue"),
+                  resolve(dir_path, "main.vue"),
+                  resolve(dir_path, `${dirent.name}.vue`),
+                ]
+              : []),
+            resolve(dir_path, `${dirent.name}.ts`),
+            resolve(dir_path, `${dirent.name}.tsx`),
+            resolve(dir_path, `${dirent.name}.js`),
+            resolve(dir_path, `${dirent.name}.jsx`),
+          ].find((path) => {
+            const exists = existsSync(path);
+            debug_log(
+              "checking entry candidate",
+              `${path} ${picocolors[exists ? "green" : "red"](
+                `exists - ${exists}`
+              )}`
+            );
+            return exists;
+          });
+          debug_log("found entry", entry_file_path);
+          return [dirent.name, entry_file_path];
+        })
+        // 没有找到入口的就不管
+        .filter((entry): entry is [string, string] => !!entry[1]);
+
+  return module_entries.length > 0
+    ? Object.fromEntries(module_entries)
+    : undefined;
+}

package/src/packer/get-externals-and-tags.ts

@@ -0,0 +1,65 @@
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import {
+  is_env_external,
+  type ExternalLibs,
+  type ImportExternal,
+  is_module_typed_external_url,
+  type ModuleTypedExternalUrl,
+  type ConfigExternalUrl,
+} from "../config/externals.ts";
+import type { Tag } from "../config/preset/html.ts";
+import { is_string } from "../type/guard.ts";
+
+function get_external_url(args: ModuloArgs_Pack, url: ConfigExternalUrl) {
+  let _url = url;
+  while (!is_string(_url)) {
+    if (is_env_external(_url)) {
+      _url = _url[args.pack.env];
+    } else {
+      const mode = args.pack.esm ? "esm" : "umd";
+      _url = mode in _url ? (_url as any)[mode] : undefined;
+    }
+  }
+  return _url;
+}
+
+export function get_externals_importmaps(
+  args: ModuloArgs_Pack,
+  external_list: ExternalLibs
+) {
+  return Object.entries(external_list).reduce(
+    ({ externals, importmaps }, [lib_name, data]) => {
+      // 归一化为GlobalExternal或者ImportExternal
+      // 此处类型推导有问题，因此手动断言
+      const _data = is_env_external(data) ? data[args.pack.env] : data;
+      const external_lib =
+        typeof _data === "string"
+          ? { url: { esm: _data, umd: _data } }
+          : is_module_typed_external_url(_data)
+          ? { url: _data }
+          : _data;
+
+      // 合并externals，以剔除打包内容
+      const _importName = external_lib.importName || lib_name;
+      (Array.isArray(_importName) ? _importName : [_importName]).forEach(
+        (name) => (externals[name] = lib_name)
+      );
+
+      const url = get_external_url(args, external_lib.url);
+      // 如果有external的url
+      if (url) {
+        // 如果是import的，加入到importmaps
+        importmaps[lib_name] = url;
+      }
+
+      return {
+        externals,
+        importmaps,
+      };
+    },
+    {
+      externals: {} as Record<string, string>,
+      importmaps: {} as Record<string, string>,
+    }
+  );
+}

package/src/packer/lib.ts

@@ -0,0 +1,84 @@
+import { pluginLess } from "@rsbuild/plugin-less";
+import { build, defineConfig } from "@rslib/core";
+import picocolors from "picocolors";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { get_global_config, get_packagejson } from "../config/index.ts";
+import { framework_plugin } from "../tools/get-ui-plugin.ts";
+import { prepare_config } from "./prepare.ts";
+
+export async function lib_pack(args: ModuloArgs_Pack) {
+  const config = get_global_config(args);
+  const packagejson = get_packagejson();
+
+  const { entries, externals } = prepare_config(args, "module", config);
+
+  if (!entries) {
+    return;
+  }
+
+  const rslibConfig = defineConfig({
+    source: {
+      define: config.define,
+      entry: entries,
+    },
+    plugins: [framework_plugin(args), pluginLess()],
+    resolve: {
+      alias: config.alias,
+    },
+    lib: [
+      {
+        format: "esm",
+        syntax: "esnext",
+        dts: false,
+        output: {
+          assetPrefix: `${config.url.base}/modules`,
+          externals,
+          distPath: {
+            root: config.output.modules,
+            js: "esm",
+            jsAsync: "esm",
+            css: "esm",
+          },
+          minify: config.minify,
+        },
+      },
+      {
+        format: "umd",
+        output: {
+          assetPrefix: `${config.url.base}/modules`,
+          externals,
+          distPath: {
+            root: config.output.modules,
+            js: "umd",
+            jsAsync: "umd",
+            css: "umd",
+          },
+          minify: config.minify,
+        },
+        syntax: "es6",
+        umdName: `${packagejson.name}-modules-[name]`,
+      },
+    ],
+    output: {
+      legalComments: "none",
+      target: "web",
+    },
+    performance: {
+      bundleAnalyze: config.analyze
+        ? {
+            analyzerMode: "disabled",
+            generateStatsFile: true,
+          }
+        : undefined,
+      chunkSplit: {
+        strategy: "all-in-one",
+      },
+    },
+  });
+
+  await build(rslibConfig, { watch: args.cmd === "build" && args.pack.watch });
+
+  if (args.cmd === "build") {
+    console.log(picocolors.green("\n**** 构建【module】完成 ****\n"));
+  }
+}

package/src/packer/page.ts

@@ -0,0 +1,98 @@
+import { resolve } from "node:path";
+import { createRsbuild, defineConfig } from "@rsbuild/core";
+import { pluginLess } from "@rsbuild/plugin-less";
+import picocolors from "picocolors";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { get_global_config } from "../config/index.ts";
+import { get_package_root } from "../tools/find-path-root.ts";
+import { framework_plugin } from "../tools/get-ui-plugin.ts";
+import { pluginUmd } from "@rsbuild/plugin-umd";
+import { prepare_config } from "./prepare.ts";
+
+export async function page_pack(args: ModuloArgs_Pack) {
+  const config = get_global_config(args);
+
+  const { entries, externals, importmaps_tag } = prepare_config(
+    args,
+    "page",
+    config
+  );
+
+  if (!entries) {
+    return;
+  }
+
+  const rsbuildConfig = defineConfig({
+    source: {
+      define: config.define,
+      entry: entries,
+    },
+    plugins: [
+      framework_plugin(args),
+      pluginLess(),
+      pluginUmd({
+        name: "modulo-page",
+      }),
+    ],
+    tools: {
+      rspack: {
+        experiments: {
+          outputModule: args.pack.esm,
+        },
+      },
+      htmlPlugin: true,
+    },
+    output: {
+      assetPrefix: config.url.cdn || config.url.base,
+      distPath: {
+        root: config.output.dist,
+      },
+      externals,
+      filenameHash: config.output.filenameHash,
+      legalComments: "none",
+      minify: config.minify,
+    },
+    html: {
+      meta: config.html.meta,
+      mountId: config.html.root,
+      scriptLoading: args.pack.esm ? "module" : "defer",
+      tags: [importmaps_tag, ...config.html.tags],
+      template:
+        config.html.template ||
+        resolve(get_package_root(), "template/index.html"),
+      templateParameters: {
+        base_prefix: config.url.base,
+      },
+      title: config.html.title,
+    },
+    resolve: {
+      alias: config.alias,
+    },
+    server: {
+      base: config.url.base,
+      open: config.dev_server.open
+        ? config.dev_server.open.map(
+            (name: string) =>
+              config.url.base +
+              (name.endsWith("html") ? `/${name}` : `/${name}.html`)
+          )
+        : false,
+      port: config.dev_server.port,
+      proxy: config.dev_server.proxy,
+    },
+    performance: {
+      chunkSplit: {
+        strategy: "split-by-experience",
+      },
+    },
+  });
+
+  const rsbuild = await createRsbuild({ rsbuildConfig });
+  await rsbuild[args.cmd === "dev" ? "startDevServer" : "build"]({
+    watch: args.cmd === "build" && args.pack.watch,
+  });
+
+  if (args.cmd === "build") {
+    console.log(picocolors.green("\n**** 构建【page】完成 ****"));
+  }
+}

package/src/packer/prepare.ts

@@ -0,0 +1,76 @@
+import picocolors from "picocolors";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { collect_modules } from "./collect-modules.ts";
+import { omit_root_path_for_entries } from "../tools/omit-root-path.ts";
+import { get_externals_importmaps } from "./get-externals-and-tags.ts";
+import type { GLOBAL_CONFIG } from "../config/type.ts";
+
+let printed = false;
+
+export function prepare_config(
+  args: ModuloArgs_Pack,
+  kind: "page" | "module",
+  config: GLOBAL_CONFIG
+) {
+  const { externals, importmaps } = get_externals_importmaps(
+    args,
+    config.externals
+  );
+
+  !printed &&
+    console.log(
+      `${picocolors.blue("\nexternals:")}\n${JSON.stringify(
+        externals,
+        null,
+        2
+      )}\n`
+    );
+
+  if (kind === "page") {
+    console.log(
+      `${picocolors.blue("html_tags:")}\n${JSON.stringify(
+        config.html.tags,
+        null,
+        2
+      )}\n`
+    );
+  }
+
+  const importmaps_tag = {
+    append: false,
+    head: true,
+    tag: "script",
+    attrs: { type: args.pack.esm ? "importmap" : "systemjs-importmap" },
+    children: `{
+         "imports": ${JSON.stringify(importmaps, null, 2)}
+      }`,
+  };
+
+  !printed &&
+    console.log(
+      `${picocolors.blue("\nimportmaps:")}\n${JSON.stringify(
+        importmaps,
+        null,
+        2
+      )}\n`
+    );
+
+  printed = true;
+
+  console.log(picocolors.blueBright(`\n**** 开始构建 【${kind}】 ****`));
+  const entries = collect_modules(args, kind);
+
+  if (!entries) {
+    console.log(picocolors.red(`\n没有要构建的${kind}，跳过\n`));
+  } else {
+    console.log(
+      `${picocolors.blue(`\n${kind} entries:`)}\n${JSON.stringify(
+        omit_root_path_for_entries(entries),
+        null,
+        2
+      )}\n`
+    );
+  }
+
+  return { entries, externals, importmaps_tag };
+}

package/src/tools/debug-log.ts

@@ -0,0 +1,37 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import picocolors from "picocolors";
+import { argv_debug, argv_verbose } from "../args/index.ts";
+
+const logFile = path.join(process.cwd(), "modulo.debug.log");
+let index = 0;
+
+let debug_log_function: (hint: string, ...params: any) => void;
+
+export function debug_log(_hint: string, ..._params: any) {
+  if (!debug_log_function) {
+    debug_log_function = (hint: string, ...params: any) => {
+      if (argv_debug || argv_verbose) {
+        const timestamp = new Date().toISOString();
+        const sn = String(index++).padStart(3, "0");
+        const logEntry = `--------------\n${sn} [${timestamp}] ${hint}\n${params
+          .map((p: unknown) =>
+            typeof p === "object" ? JSON.stringify(p, null, 2) : String(p)
+          )
+          .join("\n")}\n---------------\n\n`;
+
+        if (argv_verbose) {
+          console.log(logEntry);
+        }
+
+        if (argv_debug) {
+          // 打印序列号方便debug
+          console.log(picocolors.blue(`\ndebug log ${sn}`));
+
+          fs.appendFileSync(logFile, logEntry);
+        }
+      }
+    };
+  }
+  debug_log_function(_hint, ..._params);
+}

package/src/tools/file.ts

@@ -0,0 +1,19 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import picocolors from 'picocolors';
+import { debug_log } from './debug-log.ts';
+
+export function read_file(path: string, error_msg?: string) {
+  try {
+    return readFileSync(path, 'utf8');
+  } catch {
+    console.log(picocolors.red(error_msg || `文件无法访问或者不存在: ${path}`));
+    return '';
+  }
+}
+
+export function resolve_and_read(root: string, name: string) {
+  const fullpath = resolve(root, name);
+  debug_log(`resolve file: ${name}`, 'result is:', fullpath);
+  return read_file(fullpath);
+}

package/src/tools/find-path-root.ts

@@ -0,0 +1,29 @@
+import fs from 'node:fs';
+import path, { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { debug_log } from './debug-log.ts';
+
+let packageRoot = '';
+
+export function get_package_root() {
+  if (!packageRoot) {
+    const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+    const __dirname = dirname(__filename); // get the name of the directory
+
+    let currentDir = path.resolve(__dirname);
+    const root = path.parse(currentDir).root;
+
+    while (currentDir !== root) {
+      const potentialPkgJson = path.join(currentDir, 'package.json');
+      if (fs.existsSync(potentialPkgJson)) {
+        break;
+      }
+      currentDir = path.dirname(currentDir);
+    }
+
+    debug_log('packageRoot', currentDir);
+    packageRoot = currentDir;
+  }
+
+  return packageRoot;
+}