@yannick-z/modulo 0.2.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@yannick-z/modulo",
+  "description": "",
+  "type": "module",
+  "version": "0.2.0",
+  "main": "./src/index.ts",
+  "author": "oyangxiao",
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build -w"
+  },
+  "bin": {
+    "modulo": "./bin/modulo.js"
+  },
+  "dependencies": {
+    "@rsbuild/core":"^1.7.2",
+    "@rsbuild/plugin-less":"^1.5.0",
+    "@rsbuild/plugin-react":"^1.4.2",
+    "@rsbuild/plugin-umd":"^1.0.5",
+    "@rsbuild/plugin-vue2":"^1.0.5",
+    "@rslib/core":"^0.19.3",
+    "@types/node":"^24.0.0",
+    "@types/semver": "^7.7.1",
+    "minimist":"^1.2.8",
+    "picocolors":"^1.1.1",
+    "semver":"^7.7.3",
+    "typescript":"^5.9.3"
+  },
+  "devDependencies": {
+    "@types/minimist": "^1.2.5"
+  },
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/rslib.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      dts: false,
+      format: 'esm',
+      syntax: 'esnext',
+    },
+  ],
+  output: {
+    distPath: {
+      root: './dist',
+    },
+    target: 'node',
+  },
+  source: {
+    entry: {
+      index: './src/index.ts',
+    },
+  },
+});

package/src/args/cmd.ts

@@ -0,0 +1,16 @@
+import type minimist from "minimist";
+import { PANIC_IF } from "../tools/panic.ts";
+
+// 命令
+export function get_cmd(argv: minimist.ParsedArgs) {
+  const cmd_list = ["build", "dev", "init"] as const;
+  const cmd = argv._[0] as (typeof cmd_list)[number];
+  PANIC_IF(
+    !cmd_list.includes(cmd),
+    `modulo必须执行 ${cmd_list.join(" 或 ")} 命令`
+  );
+  return cmd;
+}
+
+export type ModuloCmd_Pack = "build" | "dev";
+export type ModuloCmd_Init = "init";

package/src/args/get-framework-name.ts

@@ -0,0 +1,19 @@
+import { get_packagejson } from "../config/index.ts";
+import { get_framework_name } from "../tools/get-framework-name.ts";
+import { PANIC_IF } from "../tools/panic.ts";
+import semver from "semver";
+
+export function detect_preset() {
+  const { dependencies } = get_packagejson();
+
+  const framework_name = get_framework_name();
+  const version = semver.parse(dependencies[framework_name])!;
+
+  PANIC_IF(!version, `package.json中未识别到${framework_name}的版本信息`);
+
+  //需要识别
+
+  const preset = `${framework_name}${version.major}`;
+
+  return preset;
+}

package/src/args/index.ts

@@ -0,0 +1,80 @@
+import minimist from "minimist";
+import { default_config_file_name } from "../config/example/example-config.ts";
+import type { preset_ui_libs } from "../config/preset/libs.ts";
+import { get_cmd, type ModuloCmd_Init, type ModuloCmd_Pack } from "./cmd.ts";
+import { get_env } from "./mode.ts";
+import { set_node_env } from "./node_env.ts";
+import { get_preset_for_init } from "./preset.ts";
+import {
+  get_cmd_target,
+  type ModuloTarget_Init,
+  type ModuloTarget_Pack,
+} from "./target.ts";
+
+export interface ModuloArgs_Pack {
+  cmd: ModuloCmd_Pack;
+  target: ModuloTarget_Pack;
+  pack: {
+    config: string;
+    env: "dev" | "prd";
+    watch: boolean;
+    esm: boolean;
+  };
+}
+
+export interface ModuloArgs_Init {
+  cmd: ModuloCmd_Init;
+  target: ModuloTarget_Init;
+  init: {
+    path: string;
+    force: boolean;
+    preset: keyof typeof preset_ui_libs;
+  };
+}
+
+let args: ModuloArgs_Init | ModuloArgs_Pack;
+
+const argv = minimist(process.argv.slice(2));
+export const argv_debug = argv.debug === "true";
+export const argv_verbose = argv.verbose === "true" || argv.v;
+
+export function get_args() {
+  if (!args) {
+    const cmd = get_cmd(argv);
+
+    if (cmd === "build" || cmd === "dev") {
+      const target = get_cmd_target(argv, cmd);
+      // watch只能对单个构建目标使用
+      const watch = target === "all" ? false : argv.watch === "true" || argv.w;
+      args = {
+        cmd,
+        target,
+        // 是否是调试modulo
+        pack: {
+          // 配置文件路径
+          config:
+            (argv.config as string | undefined) || default_config_file_name,
+          // 运行模式, dev | prd
+          env: cmd === "build" || cmd === "dev" ? get_env(argv, cmd) : "prd",
+          watch,
+          esm: argv.format === "esm" || argv.f === "esm",
+        },
+      };
+      args.pack.env && set_node_env(args.pack.env);
+    } else {
+      args = {
+        cmd,
+        target: get_cmd_target(argv, cmd),
+        init: {
+          path: argv.path,
+          force: argv.force === "true" || argv.f,
+          preset: get_preset_for_init(argv),
+        },
+      };
+    }
+
+    if (argv_verbose) console.log("args: ", args);
+  }
+
+  return args;
+}

package/src/args/mode.ts

@@ -0,0 +1,38 @@
+import type minimist from "minimist";
+import picocolors from "picocolors";
+import { PANIC_IF } from "../tools/panic.ts";
+
+const mode_list = ["dev", "development", "prd", "production"];
+
+export function get_env(argv: minimist.ParsedArgs, cmd: "dev" | "build") {
+  // mode参数
+  let env = "" as "dev" | "prd";
+  if (argv.env) {
+    if (argv.env === "dev" || argv.env === "development") {
+      env = "dev";
+    } else if (argv.env === "prd" || argv.env === "production") {
+      env = "prd";
+    } else {
+      PANIC_IF(true, `env参数只能为 ${mode_list.join(" 或 ")}`);
+    }
+    console.log(picocolors.blue(`env = ${env}`));
+  } else if (cmd === "build" || cmd === "dev") {
+    if (process.env.NODE_ENV) {
+      env = process.env.NODE_ENV === "production" ? "prd" : "dev";
+      console.log(
+        picocolors.yellow("\n未设置env，将根据process.env.NODE_ENV自动设置\n"),
+        picocolors.yellow(
+          `process.env.NODE_ENV = ${process.env.NODE_ENV}, env = ${env}`
+        )
+      );
+    } else {
+      env = cmd === "build" ? "prd" : "dev";
+      console.log(
+        picocolors.yellow("\n未设置env，将根据build或dev命令自动设置\n"),
+        picocolors.yellow(`cmd = ${cmd}, env = ${env}`)
+      );
+    }
+  }
+
+  return env;
+}

package/src/args/node_env.ts

@@ -0,0 +1,15 @@
+import picocolors from 'picocolors';
+
+export function set_node_env(mode: 'dev' | 'prd') {
+  /**
+   * 保证process.env.NODE_ENV有值
+   */
+  const _node_env = mode === 'dev' ? 'development' : 'production';
+  if (process.env.NODE_ENV !== _node_env) {
+    console.log(
+      picocolors.yellow('\nprocess.env.NODE_ENV 与 mode 不一致, 将被强制设置为与mode匹配的值\n'),
+      picocolors.yellow(`mode = ${mode}, process.env.NODE_ENV = ${_node_env}\n`),
+    );
+    process.env.NODE_ENV = _node_env;
+  }
+}

package/src/args/preset.ts

@@ -0,0 +1,26 @@
+import type minimist from "minimist";
+import picocolors from "picocolors";
+import { detect_preset } from "./get-framework-name.ts";
+import { PANIC_IF } from "../tools/panic.ts";
+
+export function get_preset_for_init(argv: minimist.ParsedArgs) {
+  let preset = argv.preset;
+
+  if (!preset) {
+    preset = detect_preset();
+    console.log(
+      picocolors.blue(
+        "未输入preset，但是根据package.json中的依赖自动识别到preset为: " +
+          preset
+      )
+    );
+  }
+
+  preset &&
+    PANIC_IF(
+      preset !== "react17" && preset !== "vue2",
+      "目前只支持react17和vue2"
+    );
+
+  return preset;
+}

package/src/args/target.ts

@@ -0,0 +1,44 @@
+import type minimist from "minimist";
+import { PANIC_IF } from "../tools/panic.ts";
+import type { ModuloCmd_Init, ModuloCmd_Pack } from "./cmd";
+
+const pack_options = {
+  page: "构建页面",
+  module: "构建模块",
+  all: "页面和模块",
+};
+const init_options = {
+  config: "modulo的配置文件",
+  script: "package.json中modulo的启动命令",
+};
+const options = {
+  build: pack_options,
+  dev: {
+    page: pack_options.page,
+    module: pack_options.module,
+  },
+  init: init_options,
+};
+
+export type ModuloTarget_Pack = keyof typeof pack_options;
+export type ModuloTarget_Init = keyof typeof init_options;
+
+export function get_cmd_target<T extends ModuloCmd_Pack | ModuloCmd_Init>(
+  argv: minimist.ParsedArgs,
+  cmd: T
+) {
+  const target = argv._[1];
+
+  const target_list = options[cmd];
+
+  PANIC_IF(
+    !(target in target_list),
+    `modulo ${cmd} 命令必须执行 ${Object.entries(target_list).map(
+      ([k, v]) => `\n${k} - ${v}`
+    )} 几种目标`
+  );
+
+  return target as T extends ModuloCmd_Init
+    ? ModuloTarget_Init
+    : ModuloTarget_Pack;
+}

package/src/cli/init.ts

@@ -0,0 +1,12 @@
+import type { ModuloArgs_Init } from "../args/index.ts";
+import { create_config_file } from "../initiator/create-config-file.ts";
+import { modify_scripts } from "../initiator/modify-scripts.ts";
+
+export function init_tool(args: ModuloArgs_Init) {
+  if (args.target === "config") {
+    create_config_file(args);
+  }
+  if (args.target === "script") {
+    modify_scripts();
+  }
+}

package/src/cli/pack-code.ts

@@ -0,0 +1,17 @@
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { lib_pack } from "../packer/lib.ts";
+import { page_pack } from "../packer/page.ts";
+
+export async function pack_code(args: ModuloArgs_Pack) {
+  const { target } = args;
+
+  //先构建页面，防止产物目录被清理掉
+  // target为all的时候不允许watch，只能分别启动两个进程
+  if (target === "page" || target === "all") {
+    await page_pack(args);
+  }
+
+  if (target === "module" || target === "all") {
+    await lib_pack(args);
+  }
+}

package/src/config/example/example-config.ts

@@ -0,0 +1,46 @@
+import picocolors from "picocolors";
+import { star_line } from "../../initiator/modify-scripts.ts";
+import { preset_alias } from "../preset/alias.ts";
+import { preset_config } from "../preset/index.ts";
+import type { USER_CONFIG } from "../type.ts";
+import { common_example_externals, presets } from "./example-externals.ts";
+
+export function get_example_config(preset?: "react" | "vue" | undefined) {
+  console.log(
+    picocolors.magenta(
+      `\n${star_line}\n默认配置文件中的externals内容为推荐内容\n请注意手动替换配置文件中externals的url，以保证符合项目需求\n如果不需要externals部分依赖，也可以将他们从列表中删除\n${star_line}\n`
+    )
+  );
+  return {
+    // 提供一些常用的配置
+    input: preset_config.input,
+    output: {
+      filenameHash: true,
+    },
+    url: {
+      base: "/",
+    },
+    alias: preset_alias,
+    html: {
+      root: "app",
+      title: "Modulo Page",
+      meta: {},
+      tags: [
+        {
+          tag: "script",
+          attrs: {
+            src: "/packages/webhost/dist/webhost.system.js",
+          },
+          append: false,
+          publicPath: false,
+        },
+      ],
+    },
+    dev_server: {
+      proxy: preset_config.dev_server.proxy,
+    },
+    externals: preset ? presets[preset] : common_example_externals,
+  } as USER_CONFIG;
+}
+
+export const default_config_file_name = "modulo.config.json";

package/src/config/example/example-externals.ts

@@ -0,0 +1,47 @@
+import type { ExternalLibs } from "../externals.ts";
+
+// 构建会将以下依赖排除在外，不打包进产物，也可配置更多的依赖
+export const vue2_example_externals: ExternalLibs = {
+  vue: {
+    // 支持多个importName，以避免import Vue from 'Vue'这种不正规的写法
+    importName: ["vue", "Vue"],
+    // preset代表初始化配置的时候能够减少无用配置，比如vue的preset会自动过滤只配置vue的externals
+    // url可以直接写字符串，则无论哪种打包模式，都使用这个url
+    // 也可以分别提供umd和esm的url，则会根据打包模式自动切换
+    // 另外还支持dev和prd模式分别提供不同的url
+    url: {
+      umd: "https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js",
+      esm: "https://cdn.jsdelivr.net/npm/vue@2.7.16/+esm",
+    },
+  },
+};
+export const react17_example_externals: ExternalLibs = {
+  react: {
+    importName: ["react", "React"],
+    url: {
+      umd: "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
+      esm: "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
+    },
+  },
+  // 不写importName，则默认使用libName作为importName
+  "react-dom": {
+    umd: "/packages/common/js/react-17.0.2/umd/react-dom.production.min.js",
+    esm: "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm",
+  },
+  "react/jsx-runtime": {
+    umd: "/packages/common/js/react-17.0.2/umd/react-jsx-runtime.js",
+    esm: "/packages/common/js/react-17.0.2/esm/react-jsx-runtime.js",
+  },
+};
+export const common_example_externals: ExternalLibs = {
+  jquery: "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
+  rxjs: {
+    umd: "https://cdn.jsdelivr.net/npm/rxjs@7.8.2/dist/bundles/rxjs.umd.min.js",
+    esm: "https://cdn.jsdelivr.net/npm/rxjs@7.8.2/+esm",
+  },
+};
+
+export const presets = {
+  vue2: { ...vue2_example_externals, ...common_example_externals },
+  react17: { ...react17_example_externals, ...common_example_externals },
+};

package/src/config/externals.ts

@@ -0,0 +1,70 @@
+import { is_record, is_string } from "../type/guard.ts";
+
+export interface UmdExternalUrl {
+  umd: string;
+}
+
+export interface EsmExternalUrl {
+  esm: string;
+}
+
+export function is_umd_url(data: unknown): data is UmdExternalUrl {
+  return is_record(data) && is_string(data.umd);
+}
+
+export function is_esm_url(data: unknown): data is EsmExternalUrl {
+  return is_record(data) && is_string(data.esm);
+}
+
+export type ModuleTypedExternalUrl = UmdExternalUrl | EsmExternalUrl;
+
+export function is_module_typed_external_url(
+  data: unknown
+): data is ModuleTypedExternalUrl {
+  return is_umd_url(data) || is_esm_url(data);
+}
+
+export interface EnvExternalUrl {
+  dev: ModuleTypedExternalUrl | string;
+  prd: ModuleTypedExternalUrl | string;
+}
+
+export function is_env_external(data: unknown): data is EnvExternalUrl {
+  return (
+    is_record(data) &&
+    (is_string(data.dev) || is_module_typed_external_url(data.dev)) &&
+    (is_string(data.prd) || is_module_typed_external_url(data.prd))
+  );
+}
+
+export type ConfigExternalUrl =
+  | ModuleTypedExternalUrl
+  | EnvExternalUrl
+  | string;
+
+export interface ImportExternal {
+  url: ConfigExternalUrl;
+  importName?: string | string[];
+  preset?: string;
+}
+
+export function is_url_config(data: unknown): data is ConfigExternalUrl {
+  return (
+    is_module_typed_external_url(data) ||
+    is_env_external(data) ||
+    is_string(data)
+  );
+}
+
+export function is_import_external(data: unknown): data is ImportExternal {
+  // 没有global的一概作为import的依赖
+  return is_record(data) && is_url_config(data.url) && !is_string(data.global);
+}
+
+export type ExternalLibs = {
+  [name: string]:
+    | ImportExternal
+    | ModuleTypedExternalUrl
+    | EnvExternalUrl
+    | string;
+};

package/src/config/generate_config.ts

@@ -0,0 +1,105 @@
+import { resolve } from "node:path";
+import { cwd } from "node:process";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { debug_log } from "../tools/debug-log.ts";
+import { resolve_and_read } from "../tools/file.ts";
+import { jsonparse } from "../tools/json.ts";
+import { merge_user_config } from "../tools/merge-user-config.ts";
+import { PANIC_IF } from "../tools/panic.ts";
+import { preset_config } from "./preset/index.ts";
+import { preset_minify_config } from "./preset/minify.ts";
+import type { GLOBAL_CONFIG, USER_CONFIG } from "./type.ts";
+/**
+ * 命令启动时候的目录作为根目录
+ */
+export const root = cwd();
+let global_config: GLOBAL_CONFIG;
+
+export function get_global_config(args: ModuloArgs_Pack): GLOBAL_CONFIG {
+  if (!global_config) {
+    /**
+     * 读取配置文件
+     */
+
+    // biome-ignore lint/style/noNonNullAssertion: <有panic保护>
+    const user_config = jsonparse<USER_CONFIG>(
+      resolve_and_read(root, args.pack.config)
+    )!;
+    PANIC_IF(!user_config, "根目录下没有配置文件");
+    debug_log("input user config", user_config);
+
+    /**
+     * 将配置文件和默认配置合并
+     */
+    merge_user_config(preset_config, user_config);
+    const _config: GLOBAL_CONFIG = preset_config;
+
+    /**
+     * src目录
+     */
+    const src = resolve(root, _config.input.src);
+    const input = {
+      modules: resolve(src, _config.input.modules),
+      pages: resolve(src, _config.input.pages),
+      src: src,
+    };
+
+    /**
+     * dist目录
+     */
+    const dist = resolve(root, _config.output.dist);
+    const output = {
+      ..._config.output,
+      dist: dist,
+      modules: resolve(dist, _config.output.modules),
+      pages: resolve(dist, _config.output.pages),
+    };
+
+    /**
+     * 允许定制template
+     */
+    const html = _config.html?.template
+      ? { ..._config.html, template: resolve(root, _config.html.template) }
+      : _config.html;
+
+    /**
+     * 所有define的值都序列化以正确传入
+     */
+    const define = Object.fromEntries(
+      Object.entries({
+        ..._config.define,
+        "process.env.NODE_ENV": process.env.NODE_ENV,
+        "import.meta.env.MOUNT_ID": _config.html.root,
+      }).map(([k, v]) => [k, JSON.stringify(v)])
+    );
+    debug_log("当前模式", process.env.NODE_ENV);
+
+    /**
+     * minify代码的开关
+     */
+    const minify =
+      _config.minify === true ? preset_minify_config : _config.minify;
+
+    /**
+     * alias 允许使用{src}作为占位符，取值来自input.src
+     */
+    const alias = Object.fromEntries(
+      Object.entries(_config.alias).map(([k, v]) => [
+        k,
+        v.replace("{input.src}", input.src),
+      ])
+    );
+
+    global_config = {
+      ..._config,
+      define,
+      html,
+      input,
+      minify,
+      output,
+      alias,
+    };
+    debug_log("global config", global_config);
+  }
+  return global_config;
+}

package/src/config/index.ts

@@ -0,0 +1,27 @@
+import { resolve_and_read } from "../tools/file.ts";
+import { jsonparse } from "../tools/json.ts";
+import { PANIC_IF } from "../tools/panic.ts";
+import { root } from "./generate_config.ts";
+
+interface PackageJson {
+  name: string;
+  dependencies: Record<string, string>;
+  scripts: undefined | Record<string, string>;
+}
+/**
+ * 读取package.json
+ */
+let packagejson = null as PackageJson | null;
+export function get_packagejson() {
+  if (!packagejson) {
+    // biome-ignore lint/style/noNonNullAssertion: <panic if content nullable>
+    packagejson = jsonparse<PackageJson>(
+      resolve_and_read(root, "package.json")
+    )!;
+    PANIC_IF(!packagejson, "根目录下没有package.json");
+    PANIC_IF(!packagejson.name, "package.json缺少name字段");
+  }
+  return packagejson;
+}
+
+export { get_global_config } from "./generate_config.ts";

package/src/config/preset/alias.ts

@@ -0,0 +1,3 @@
+export const preset_alias: Record<string, string> = {
+  "@": "{input.src}",
+};

package/src/config/preset/dev-server.ts

@@ -0,0 +1,6 @@
+export const preset_dev_server_config = {
+  open: false as false | string[], // dev时是否自动打开指定页面
+  port: 8080, // 开发页面时, dev-server服务器端口
+  proxy: {} as Record<string, string | { target: string; pathRewrite?: Record<string, string> }>, // dev时的代理配置
+};
+export type DEV_SERVER_CONFIG = typeof preset_dev_server_config;

package/src/config/preset/dirs.ts

@@ -0,0 +1,12 @@
+export const preset_input_dirs = {
+  src: "src", // 源码目录
+  pages: "pages", // 页面目录
+  modules: "modules", // 组件目录
+};
+
+export const preset_output_dirs = {
+  dist: "dist", // 源码目录
+  pages: "", // 页面目录输出目录，默认使用dist/..
+  modules: "modules", // 组件输出目录，默认使用dist/modules/..
+  filenameHash: true,
+};

package/src/config/preset/html.ts

@@ -0,0 +1,19 @@
+export interface Tag {
+  append?: boolean;
+  attrs?: Record<string, string>;
+  children?: string;
+  hash?: boolean | string;
+  head?: boolean;
+  publicPath?: string | boolean;
+  tag: string;
+}
+
+export const default_html_config = {
+  meta: {} as Record<string, string>,
+  root: '', // html挂载点id, 只允许id
+  tags: [] as Tag[],
+  template: '', // html模板的路径
+  title: '', // html标题
+};
+
+export type HTML_CONFIG = typeof default_html_config;