wb-lib-tool 0.0.1-beta.1

package/README.ch.md

@@ -0,0 +1,198 @@
+# wb-lib
+
+## 简介
+
+使用 webpack 编译可生成多种js标准格式的组件库打包工具，默认支持 react 组件库的打包。
+
+## 安装
+
+```
+// 在项目中安装wb-lib
+
+npm i wb-lib -D
+or
+yarn add wb-lib -D
+```
+
+## 命令
+
+```
+/* 编译组件库 */
+wb-lib lib 
+
+/* 组件库开发预览
+* 默认以src/(index.jsx｜index.tsx)文件为入口，
+* 项目根目录可以创建index.html
+* 如果没有创建则默认使用内置的index.html */
+wb-lib dev 
+```
+
+## 使用配置
+
+可创建并使用 **`lib.config.js|lib.config.ts`** 配置来自定义打包。
+
+#### 可使用属性
+
+| 属性 | 类型  | 说明 |
+| ---- | --------------- | ---- |
+**format** | Object｜Array｜string  | 生成格式配置【可配置类型 ['module','commonjs']等】，默认值为 `module` |
+**output** | String | 输出存放文件夹，默认值为 `lib` |
+**clean** | Boolean | 是否在打包前清除存放文件夹，默认值为 `true` |
+**compileDir** | String | 编译目录，默认值为 `src/components` |
+**webpackConf** | Function｜Object | 自定义 webpack 配置项, 如传入函数，函数参数为 `function (webpackConf,env,format){ return webpackConf; }`，需要返回值为自定义的 webpack 配置项 `webpackConf(已有的webpack配置项)/env(当前运行模式[development｜library])/format（编译格式[development模式下为null]）` |
+
+#### 配置文件的使用示例
+##### 创建lib.config.ts｜lib.config.js选其一就行,同时存在会默认优先加载lib.config.ts
+###### 使用lib.config.ts 示例
+```
+import { merge } from 'webpack-merge';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+// 在ES模块中获取__dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = resolve(__filename, '..');
+
+export default {
+    compileDir: 'src/components', // 默认编译目录
+    output: 'lib', // 输出存放文件夹
+    clean: true, // 是否在打包前清除存放文件夹
+
+    //【format 使用方式1】
+    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [output]目录下【默认生成module格式】
+
+    //【format 使用方式2】
+    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [output]/(module｜commonjs) 目录下
+
+    //【format 使用方式3】
+    format: {
+        // 生成 module 类型 同时相关代码文件放入到 [output]/es 目录下
+        module: 'es', 
+        // 生成 commonjs 类型 同时相关代码文件放入到 [output]/cjs 目录下
+        commonjs: 'cjs', 
+    },
+ 
+    //【webpackConf 使用方式1 webpack 配置项】
+    webpackConf: {
+        // webpack 配置项
+        .....  
+    }
+
+    //【webpackConf 使用方式2 webpack 配置项】
+    webpackConf: function (webpackConf, env,format) {
+        // 自定义 webpack 配置项
+        return webpackConf;
+    },
+}
+```
+
+###### 使用lib.config.js
+```
+module.exports = {
+    compileDir: 'src/components', // 默认编译目录
+    output: 'lib', // 输出存放文件夹
+    clean: true, // 是否在打包前清除存放文件夹
+
+    //【format 使用方式1】
+    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [output]目录下【默认生成module格式】
+
+    //【format 使用方式2】
+    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [output]/(module｜commonjs) 目录下
+
+    //【format 使用方式3】
+    format: {
+        // 生成 module 类型 同时相关代码文件放入到 [output]/es 目录下
+        module: 'es', 
+        // 生成 commonjs 类型 同时相关代码文件放入到 [output]/cjs 目录下
+        commonjs: 'cjs', 
+    },
+ 
+    //【webpackConf 使用方式1 webpack 配置项】
+    webpackConf: {
+        // webpack 配置项
+        .....  
+    }
+
+    //【webpackConf 使用方式2 webpack 配置项】
+    webpackConf: function (webpackConf, env,format) {
+        // 自定义 webpack 配置项
+        return webpackConf;
+    },
+
+};
+```
+
+## 目录结构说明
+
+#### 源目录结构 
+```
+├── ...                        # 其他文件
+├── src/                       # 源代码目录
+│   ├── components/            # 组件目录
+│   │   ├── button/            # 组件目录
+│   │   │   └── index.tsx      # 组件入口文件
+│   │   │   ├── style/         # 组件样式文件的文件夹
+│   │   │   │   ├── index.tsx  # 组件样式入口文件[（可不创建）可将index.scss使用 import "./index.scss" 引入可配合组件按需加载使用]
+│   │   ├── ├── └── index.scss # 组件组件样式文件
+│   │   ├── index.tsx          # 所有组件的汇集[（可不创建）可以把所有组件出口都放在一处并且所有css都汇集到一个文件中便于后期使用项目一次性引入【export { default as Xxx } from './xxx'】]
+│   └── index.tsx              # dev 入口文件
+├── index.html                 # 项目根目录html文件【可不创建】
+```
+#### 编译后目录结构 
+
+**<font size="2">format 使用方式1</font>**
+```
+├── ...                        # 其他文件
+├── [output]/                  # 输出存放文件夹
+│   ├── button/                # 组件目录
+│   │   ├── index.js           # 组件入口文件
+│   │   ├── style/             # 组件样式目录
+│   │   │   ├── index.js       # 组件样式入口文件
+│   │   │   └── index.css      # 组件样式默认会把css文件放入到style文件下并命名为index.css
+│   ├── index.min.js           # 所有组件的汇集
+│   └── index.min.css          # 所有组件的样式汇集
+```
+
+**<font size="2">format 使用方式2</font>**
+```
+├── ...                        # 其他文件
+├── [output]/                  # 输出存放文件夹     
+│   ├── module/                # module 格式代码目录
+│   │   ├── button/            # 组件目录
+│   │   │   ├── index.js       # 组件入口文件
+│   │   │   ├── style/         # 组件样式目录
+│   │   │   │   ├── index.js   # 组件样式入口文件
+│   │   │   │   └── index.css  # 组件样式默认会把css文件放入到style文件下并命名为index.css
+│   │   ├── index.min.js       # 所有组件的汇集
+│   │   └── index.min.css      # 所有组件的样式汇集
+│   ├── commonjs/              # commonjs 格式代码目录
+│   │   ├── button/            # 组件目录
+│   │   │   ├── index.js       # 组件入口文件
+│   │   │   ├── style/         # 组件样式目录
+│   │   │   │   ├── index.js   # 组件样式入口文件
+│   │   │   │   └── index.css  # 组件样式默认会把css文件放入到style文件下并命名为index.css
+│   │   ├── index.min.js       # 所有组件的汇集
+└── └── └── index.min.css      # 所有组件的样式汇集
+```
+
+**<font size="2">format 使用方式3</font>**
+```
+├── ...                        # 其他文件
+├── [output]/                  # 输出存放文件夹
+│   ├── es/                    # module 格式代码目录
+│   │   ├── button/            # 组件目录
+│   │   │   ├── index.js       # 组件入口文件
+│   │   │   ├── style/         # 组件样式目录
+│   │   │   │   ├── index.js   # 组件样式入口文件
+│   │   │   │   └── index.css  # 组件样式默认会把css文件放入到style文件下并命名为index.css
+│   │   ├── index.min.js       # 所有组件的汇集
+│   │   └── index.min.css      # 所有组件的样式汇集
+│   ├── cjs/                   # commonjs 格式代码目录
+│   │   ├── button/            # 组件目录
+│   │   │   ├── index.js       # 组件入口文件
+│   │   │   ├── style/         # 组件样式目录
+│   │   │   │   ├── index.js   # 组件样式入口文件
+│   │   │   │   └── index.css  # 组件样式默认会把css文件放入到style文件下并命名为index.css
+│   │   ├── index.min.js       # 所有组件的汇集
+└── └── └── index.min.css      # 所有组件的样式汇集
+```

package/bin/dev.js

@@ -0,0 +1,11 @@
+const { spawnPromise } = require('../utils/util.js');
+const { getResolvePath } = require('../utils/file.js');
+
+const spawnDev = async () => {
+    await spawnPromise('webpack-dev-server', ['--config',
+        `${getResolvePath('config/webpack.dev.conf.js')}`,
+        '--progress',
+        ...process.argv.slice(3),
+    ], { stdio: 'inherit' });
+}
+spawnDev();

package/bin/index.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+const { Command } = require('commander');
+const chalk = require('chalk');
+const { removeFile } = require('../utils/file.js');
+const packageJson = require('../package.json');
+
+const program = new Command(packageJson.name);
+
+
+program.version(packageJson.version);
+program.command('lib').action(() => {
+    require('./lib.js');
+});
+program.command('dev').action(() => {
+    require('./dev.js');
+});
+program.command('clean').option('-n, --name <name>', '删除项目内的文件名').action(({ name }) => {
+    removeFile(name);
+});
+program.parse();
+
+// 处理程序退出
+// const handleExit = (exitStatus = 0) => {
+//     console.error(chalk.red(
+//         `进程异常退出.\n`
+//     ));
+//     // 确保exitStatus是数字类型
+//     const numericExitStatus = typeof exitStatus === 'number' ? exitStatus : 1;
+//     process.exit(numericExitStatus);
+// }
+
+// 处理打印错误信息
+const handleError = (error, _exitStatus = 1) => {
+    console.log('')
+    error && console.error(chalk.red(
+        `进程出错! \n` +
+        `${error ? (error.message || error) : ''}`
+    ));
+    // handleExit(exitStatus);
+}
+
+// process.on('SIGINT', handleExit); // 终止监听
+// process.on('SIGTERM', handleExit); // 终止监听
+process.on('uncaughtException', (error) => handleError(error, 1)); // 异常监听
+// process.on('unhandledRejection', (reason, _promise) => handleError(reason, 1)); // 异常监听

package/bin/lib.js

@@ -0,0 +1,56 @@
+const chalk = require('chalk');
+const { timestampToHMS, DateTimeDiffS, spawnPromise, isObject } = require('../utils/util.js');
+const { getResolvePath, getCustomConfig, removeFile } = require('../utils/file.js');
+const { OUTPUT } = require('../config/PATH.js');
+
+const customConfig = getCustomConfig();
+
+const output = customConfig && customConfig.outputDir ? customConfig.outputDir : OUTPUT;
+const format = customConfig && customConfig.format ? customConfig.format : null;
+const isMerageAll = customConfig && customConfig.merageAll === true;
+
+const spawnBuildLib = async () => {
+    if (!customConfig || customConfig.clean != false) removeFile(output);
+    const startTime = Date.now();
+    let isRun = false;
+    console.log(chalk.green(`执行开始: ${timestampToHMS(startTime)}`));
+    console.log(' ');
+    if (Array.isArray(format)) {
+        isRun = true;
+        await Promise.all(format.map(type => spawnPromise('webpack', [
+            '--config',
+            `${getResolvePath('config/webpack.lib.conf.js')}`,
+            '--progress', '--color',
+            '--env', 'formatType=Array',
+            `format=${type}`,
+            `output=${output}`,
+            ...process.argv.slice(3),
+        ], { stdio: 'inherit' })));
+    } else if (isObject(format)) {
+        isRun = true;
+        await Promise.all(Object.keys(format).map(key => spawnPromise('webpack', [
+            '--config',
+            `${getResolvePath('config/webpack.lib.conf.js')}`,
+            '--progress', '--color',
+            '--env', 'formatType=Object',
+            `format=${key}`,
+            `libName=${format[key]}`,
+            `output=${output}`,
+            ...process.argv.slice(3),
+        ], { stdio: 'inherit' })));
+    }
+    if (!isRun || isMerageAll) {
+        await spawnPromise('webpack', ['--config',
+            `${getResolvePath('config/webpack.lib.conf.js')}`,
+            '--progress', '--color',
+            '--env', 'formatType=String',
+            format && `format=${format}`,
+            `output=${output}`,
+            ...process.argv.slice(3),
+        ], { stdio: 'inherit' });
+    }
+    console.log(' ');
+    console.log(chalk.green(`执行结束: ${timestampToHMS(Date.now())}, 耗时: ${DateTimeDiffS(Date.now(), startTime)}`));
+};
+
+spawnBuildLib();

package/config/PATH.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+const OUTPUT = 'lib'; // 默认输出目录
+const ROOT = process.cwd(); // 项目根目录
+const SRC = path.resolve(ROOT, './src'); // 项目源目录
+const BUILD_FILE_NAME = ['lib.config.ts', 'lib.config.js']; // 构建配置文件名可使用ts或js
+const COMPILE_DIR = path.resolve(ROOT, './src/components'); // 编译文件目录
+const DEFAULT_FORMAT = 'module'; // 默认输出格式
+
+module.exports = {
+    OUTPUT,
+    ROOT,
+    SRC,
+    BUILD_FILE_NAME,
+    COMPILE_DIR,
+    DEFAULT_FORMAT
+}

package/config/babel.config.json

@@ -0,0 +1,35 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        [
+            "@babel/preset-typescript",
+            {
+                "allowNamespaces": true,
+                "allowDeclareFields": true
+            }
+        ],
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "ie": 11
+                },
+                "modules": false,
+                "corejs": 3,
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ],
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-class-properties",
+        "@babel/plugin-transform-optional-chaining",
+        "@babel/plugin-transform-nullish-coalescing-operator"
+    ]
+}

package/config/formatFitConfig/module.js

@@ -0,0 +1,7 @@
+// 用于匹配 es 格式的特有属性配置
+
+module.exports = {
+    experiments: {
+        outputModule: true,    //  想要导出 esm （module）模式该属性 ✅ 必须加
+    }
+};

package/config/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>wb-lib</title>
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>

package/config/output.multi.js

@@ -0,0 +1,33 @@
+const { merge } = require('webpack-merge');
+const { getResolvePath, inputMultiple, outputLibrary, checkFileExist } = require('../utils/file.js');
+const { ROOT, COMPILE_DIR, DEFAULT_FORMAT } = require('../config/PATH.js');
+
+// const presetFormat = {
+//     commonjs: 'commonjs',
+//     commonjs2: 'commonjs',
+//     // module: 'module',
+// }
+
+module.exports = function ({ format = DEFAULT_FORMAT, libName, output, compileDir }) {
+    const fileDir = compileDir || COMPILE_DIR;
+    const inputs = inputMultiple(fileDir, fileDir); // 多入口文件
+    const outputPath = getResolvePath(output, ROOT); // 输出路径
+    const libraryOptions = outputLibrary(format); // 输出库选项˝
+    let formatFitConfig = {}; // 特有
+    const formatFitConfigPath = getResolvePath(`./formatFitConfig/${format}.js`, __dirname);
+    const formatFitConfigIsExist = checkFileExist(formatFitConfigPath);
+    // 获取各格式的特有配置属性
+    if (formatFitConfigIsExist) formatFitConfig = require(formatFitConfigPath);
+
+    const conf = merge({
+        entry: inputs,
+        output: {
+            path: outputPath,
+            filename: `${libName || '.'}/[name].js`,
+            chunkFilename: `chunk${libName ? `/${libName}` : ''}/[name].js`,
+            library: libraryOptions,
+        },
+    }, formatFitConfig);
+    // if (presetFormat[format]) { conf.output.chunkFormat = presetFormat[format]; };
+    return conf;
+}

package/config/webpack.base.conf.js

@@ -0,0 +1,96 @@
+const { getResolvePath } = require('../utils/file');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const baseConfig = (env) => {
+    const isDev = env === 'development';
+
+    const config = {
+        resolve: {
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.less'],
+            alias: {
+                'src': getResolvePath('src'),
+            },
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(?:png|jpe?g|gif|svg|webp)\??.*$/,
+                    type: 'asset/inline',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 10 * 1024, // 10kb > 自动使用 asset/inline
+                        },
+                    },
+                },
+                {
+                    test: /\.(?:woff|eot|ttf|wav)\??.*$/,
+                    type: 'asset/inline',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 10 * 1024, // 10kb > 自动使用 asset/inline
+                        },
+                    },
+                },
+                {
+                    test: /\.css$/,
+                    sideEffects: true,
+                    use: [
+                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        'css-loader',
+                    ],
+                },
+                {
+                    test: /\.less$/,
+                    sideEffects: true,
+                    use: [
+                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        'css-loader',
+                        {
+                            loader: 'less-loader',
+                            options: {
+                                lessOptions: {
+                                    javascriptEnabled: true,
+                                },
+                            },
+                        },
+                    ],
+                },
+                {
+                    test: /\.scss$/,
+                    sideEffects: true,
+                    use: [
+                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                esModule: false, // 禁用 ES 模块导出，改用 CommonJS 格式（适配库模式）
+                                modules: {
+                                    mode: 'global',
+                                    exportLocalsConvention: 'camelCaseOnly' // 确保导出格式兼容
+                                }
+                            }
+
+                        },
+                        {
+                            loader: 'sass-loader',
+                        },
+                    ],
+                },
+                {
+                    test: /\.(j|t)sx?$/,
+                    exclude: /node_modules/,
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                            options: {
+                                configFile: getResolvePath('babel.config.json', __dirname),
+                            },
+                        },
+                    ].filter(Boolean),
+                },
+            ]
+        },
+    };
+    return config;
+}
+module.exports = baseConfig;

package/config/webpack.dev.conf.js

@@ -0,0 +1,84 @@
+const { merge } = require('webpack-merge');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const baseConfig = require('./webpack.base.conf.js');
+const { SRC, ROOT } = require('./PATH.js');
+const { getCustomConfig, getFiles,getResolvePath } = require('../utils/file.js');
+const currentEnv = 'development';
+
+const customConfig = getCustomConfig();
+
+/**
+ * 按优先级从文件数组中获取目标文件
+ * @param {string[]} filePathArr - 文件路径数组
+ * @param {string[]} priorities - 优先级后缀列表（越靠前优先级越高）
+ * @returns {string|undefined}
+ */
+function getFileByPriority(filePathArr = indexFiles, priorities = ['index.tsx', 'index.jsx']) {
+    for (const target of priorities) {
+        // 用 endsWith 更简洁（适合固定后缀）
+        const matchFile = filePathArr.find(path => path.endsWith(target));
+        if (matchFile) return matchFile;
+    }
+    return undefined;
+}
+
+const customWebpackConf = customConfig && customConfig.webpackConf ? customConfig.webpackConf : null;
+
+// 获取并匹配src目录下的index.tsx或index.jsx文件
+const indexFiles = getFiles(SRC, /index\.(j|t)sx$/, 0);
+// 获取根目录总index.html文件
+const rootIndexHtml = getFiles(ROOT, /index\.html$/, 0)[0];
+
+const entryFile = getFileByPriority();
+
+// 默认获取src目录下的index.tsx
+
+const getDevConfig = () => {
+    if (!entryFile && (!process.env.TEST || process.env.TEST == 'false')) throw new Error('未找到入口文件，请在src目录下创建index.tsx或index.jsx文件');
+
+    let buildConfig = merge(baseConfig(currentEnv), {
+        mode: 'development',
+        cache: true,
+        devtool: 'eval-cheap-module-source-map',
+        entry: entryFile,
+        stats: "errors-only", // 只在发生错误时输出
+        devServer: {
+            allowedHosts: 'all', // 跳过 host header 检查机制
+            historyApiFallback: true, // 配置单页应用在开发中的路由行为 - 页面刷新重定向配置默认为index.html
+            server: 'http',
+            host: 'localhost',
+            port: 8181,
+            hot: true, // 开启热更新
+            open: true, // 自动打开浏览器
+            client: {
+                logging: 'warn', // 是否先显示构建信息
+                progress: true, // 是否开启编译进度条
+                overlay: false // 全屏错误提示开关
+            },
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: 'css/[name]-[contenthash:7].css',
+                chunkFilename: 'css/[name]-[contenthash:7].css',
+                ignoreOrder: true,
+            }),
+            new HtmlWebpackPlugin({ 
+                template: !!rootIndexHtml ? rootIndexHtml : getResolvePath('./index.html', __dirname),
+                filename: 'index.html',
+                chunksSortMode: 'none',
+            }),
+            new webpack.NoEmitOnErrorsPlugin(),
+        ],
+    });
+    const isCustomBuildConfFn = typeof customWebpackConf === 'function';
+    if (isCustomBuildConfFn) {
+        buildConfig = customWebpackConf(buildConfig, currentEnv, null);
+    } else {
+        buildConfig = merge(buildConfig, customWebpackConf || {});
+    };
+    return buildConfig;
+};
+
+module.exports = getDevConfig;

package/config/webpack.lib.conf.js

@@ -0,0 +1,245 @@
+const fs = require('fs');
+const { merge } = require('webpack-merge');
+const { BannerPlugin } = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { OUTPUT, DEFAULT_FORMAT, ROOT, COMPILE_DIR } = require('./PATH.js');
+const { getCustomConfig } = require('../utils/file.js');
+const getComponentExternals = require('../utils/parserExportFile.js');
+const baseConfig = require('./webpack.base.conf.js');
+const multiOutputConfig = require('./output.multi.js');
+const { getBeforeLastSlash, getLastFolderAndFile } = require('../utils/util.js');
+
+const currentEnv = 'library';
+
+
+const customConfig = getCustomConfig();
+
+const customWebpackConf = customConfig && customConfig.webpackConf ? customConfig.webpackConf : null;
+const compileDir = customConfig && customConfig.compileDir ? customConfig.compileDir : COMPILE_DIR;
+const componentExternals = getComponentExternals(compileDir, ROOT);
+const getLibConfig = function ({
+    format = DEFAULT_FORMAT, libName, formatType,
+    output = OUTPUT, generateMinChunk = false
+}) {
+    // 是不是module（esm）格式
+    const isModule = format == 'module';
+    const chunkName = '[name]'; // 默认文件命名
+    // 如果只是生成一种格式的库，那么就不需要添加格式别名或者单独放入输出目录
+    const outputAliasDirName = formatType == 'String' ? '' : (libName || format || '');
+    // 使用自定义的多入口配置
+    const outputConfig = multiOutputConfig({ format, libName: outputAliasDirName, output, compileDir });
+    const defaultEntry = outputConfig.entry;
+
+    let buildConfig = merge(baseConfig(currentEnv), {
+        target: !isModule ? ['web', 'es5'] : 'web',
+        mode: 'production',
+        externals: {
+            react: 'react',
+            'react-dom': 'react-dom',
+            'react-router-dom': 'react-router-dom',
+        },
+        optimization: {
+            minimize: false, // 是否开启压缩
+            moduleIds: 'deterministic',
+            minimizer: [
+                new TerserPlugin({
+                    extractComments: false,
+                    minify: TerserPlugin.swcMinify,
+                    parallel: true,
+                }),
+            ],
+            splitChunks: {
+                maxInitialRequests: 6,
+                maxAsyncRequests: 12,
+                minRemainingSize: 1024 * 50,
+                minSize: 1024 * 50,
+                maxSize: 1024 * 500,
+                cacheGroups: {
+                    vendor: {
+                        name(module) {
+                            if (!module.context || !module.context.match(/[\\/]node_modules[\\/](.*?)([\\/-]|$)/)) {
+                                return 'vendor/common';
+                            }
+                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/-]|$)/)[1];
+                            return `vendor/${packageName.replace('@', '')}`;
+                        },
+                        test: /[\/]node_modules[\/]/,
+                        chunks: 'all',
+                        minChunks: 2,
+                        priority: 10,
+                        reuseExistingChunk: true,
+                    },
+                    images: {
+                        chunks: 'initial',
+                        test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
+                        name: 'static/images',
+                        priority: 5,
+                        minChunks: 2,
+                        enforce: true,
+                        minSize: 1024 * 10,
+                        maxSize: 1024 * 200,
+                        reuseExistingChunk: true,
+                    },
+                    fonts: {
+                        chunks: 'initial',
+                        test: /\.(woff2?|ttf|otf|eot)$/i,
+                        name: 'static/fonts',
+                        priority: 5,
+                        minChunks: 2,
+                        enforce: true,
+                        minSize: 1024 * 50,
+                        reuseExistingChunk: true,
+                    },
+                    js: {
+                        chunks: 'initial',
+                        test: /\.(j|t)s$/i,
+                        priority: 5,
+                        enforce: true,
+                        maxSize: 1024 * 200,
+                        minChunks: 2,
+                        reuseExistingChunk: true,
+                        name(module) {
+                            if (!module.context) return false;
+                            const { folderName, fileName } = getLastFolderAndFile(module.resource) || {};
+                            let prefixName = "js";
+                            if (module.resource && module.resource.indexOf('/node_modules/') != -1) {
+                                prefixName = "vendor"
+                            }
+                            return `${prefixName}/${folderName.replace('@', '')}${fileName ? `/${fileName}` : ''}`;
+                        },
+                    }
+                },
+            },
+            runtimeChunk: {
+                name: 'runtime',
+            },
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: (pathData) => {
+                    const names = (pathData && pathData.chunk && pathData.chunk.name) ? getBeforeLastSlash(pathData.chunk.name) : null;
+                    const { folderName, generateFolderName } = names || {};
+                    return names && generateFolderName
+                        ? `${outputAliasDirName ? `${outputAliasDirName}/` : ''}${generateFolderName}/${folderName}/index.css` : `${outputAliasDirName || ''}/${chunkName}.css`;
+                },
+                chunkFilename: `chunk/${outputAliasDirName || 'style'}/${chunkName}.css`,
+                ignoreOrder: true,
+                experimentalUseImportModule: true,
+            }),
+            // 为每个JavaScript文件添加对应的CSS文件导入语句
+            new BannerPlugin({
+                banner: (data) => {
+                    // 只对JavaScript文件添加CSS导入语句
+                    if (data.filename.endsWith('.js')) {
+                        // 获取chunk信息
+                        const chunk = data.chunk;
+                        if (chunk) {
+                            // 获取入口文件的原始路径
+                            const resourcePath = outputConfig.entry && chunk.name ? outputConfig.entry[chunk.name] : null;
+                            if (resourcePath) {
+                                try {
+                                    // 读取源文件的内容
+                                    const sourceContent = fs.readFileSync(resourcePath, 'utf8');
+                                    // 定义CSS导入的正则表达式 - 支持多种导入方式
+                                    const cssImportRegex = /import\s+(?:(?:\w+|\{[^}]*\})\s+from\s+)?['"]([^'"]+\.(css|scss|less))['"]/;
+                                    // 检查源文件是否包含CSS导入语句
+                                    const hasCssImport = cssImportRegex.test(sourceContent);
+                                    // 检查文件是否仅仅包含CSS导入语句
+                                    // 去除空白行和注释，然后检查是否所有有效行都是CSS导入
+                                    const lines = sourceContent
+                                        .split('\n')
+                                        .map(line => line.trim())
+                                        .filter(line => line && !line.startsWith('//') && !line.startsWith('/*'));
+                                    const onlyHasCssImports = lines.length > 0 && lines.every(line => cssImportRegex.test(line));
+                                    // 只处理那些包含CSS导入且所有有效行都是CSS导入的文件
+                                    if (hasCssImport && onlyHasCssImports) {
+                                        // 从JavaScript文件名获取对应的CSS文件名
+                                        const jsFilename = data.filename;
+                                        // 根据MiniCssExtractPlugin的逻辑生成对应的CSS文件路径
+                                        let cssPath;
+                                        // 获取文件名部分
+                                        const pathParts = jsFilename.split('/');
+                                        const fileName = pathParts.pop();
+                                        // 检查是否是index.js文件
+                                        if (fileName === 'index.js') {
+                                            // 如果是index.js，尝试找到对应的样式文件
+                                            cssPath = './index.css';
+                                        } else {
+                                            // 否则，生成与JS文件同名的CSS文件路径
+                                            cssPath = './' + fileName.replace(/\.js$/, '.css');
+                                        }
+
+                                        // 确保路径格式正确（使用正斜杠）
+                                        cssPath = cssPath.replace(/\\/g, '/');
+
+                                        // 根据format类型生成不同的导入语句语法
+                                        switch (format) {
+                                            case 'commonjs':
+                                            case 'commonjs2':
+                                            case 'commonjs-module':
+                                            case 'commonjs-static':
+                                                // CommonJS格式，使用require语法
+                                                return `require('${cssPath}');`;
+                                            case 'amd':
+                                            case 'amd-require':
+                                                // AMD格式，使用define语法
+                                                return `require(['${cssPath}']);`;
+                                            case 'var':
+                                            case 'assign':
+                                            case 'assign-properties':
+                                            case 'this':
+                                            case 'window':
+                                            case 'self':
+                                            case 'global':
+                                            case 'umd':
+                                            case 'umd2':
+                                                // 这些格式通常用于浏览器环境，使用require语法加载CSS
+                                                return `require('${cssPath}');`;
+                                            case 'module':
+                                            default:
+                                                // ES模块格式，使用import语法
+                                                return `import '${cssPath}';`;
+                                        }
+                                    }
+                                } catch (error) {
+                                    console.error('Error reading source file:', error);
+                                }
+                            }
+                        }
+                    }
+                    return '';
+                },
+                raw: true, // 保留原始字符串，不添加注释
+                entryOnly: true, // 只对入口文件添加
+            }),
+        ]
+    });
+
+    const isCustomBuildConfFn = typeof customWebpackConf === 'function';
+    if (isCustomBuildConfFn) {
+        buildConfig = customWebpackConf(buildConfig, currentEnv, format);
+    } else {
+        buildConfig = merge(buildConfig, customWebpackConf || {});
+    };
+
+    let getcompoentExternals = componentExternals;
+    // 是生成压缩合成文件
+    if (generateMinChunk) {
+        getcompoentExternals = {};
+        // outputConfig.stats = 'errors-warnings';
+        if (outputConfig && outputConfig.entry && outputConfig.entry['index']) {
+            const entryIndex = outputConfig.entry['index'];
+            delete outputConfig.entry['index'];
+            outputConfig.entry['index.min'] = entryIndex;
+        }
+    }
+    const lastConfig = merge(outputConfig, buildConfig, { entry: defaultEntry, externals: getcompoentExternals });
+    return lastConfig;
+};
+
+module.exports = [
+    (arg) => getLibConfig(arg),
+    Object.keys(componentExternals).length > 0
+        ? (arg) => getLibConfig(Object.assign(arg, { generateMinChunk: true })) : false
+].filter(Boolean);

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "wb-lib-tool",
+  "version": "0.0.1-beta.1",
+  "description": "基于webpack库模式编译生成组件库",
+  "license": "MIT",
+  "bin": {
+    "wb-lib": "./bin/index.js"
+  },
+  "scripts": {
+    "lib": "node ./bin/index.js lib",
+    "dev": "cross-env TEST=true node ./bin/index.js dev",
+    "clean": "node ./bin/index.js clean --name lib"
+  },
+  "keywords": [
+    "lib",
+    "wb-lib",
+    "wb-lib-tool",
+    "components",
+    "react",
+    "react-component"
+  ],
+  "files": [
+    "package.json",
+    "bin",
+    "config",
+    "utils",
+    "README.ch.md"
+  ],
+  "homepage": "https://gitee.com/my_domain/webpack-lib",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/my_domain/webpack-lib"
+  },
+  "bugs": {
+    "url": "https://gitee.com/my_domain/webpack-lib/issues"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/parser": "^7.28.5",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+    "@babel/plugin-transform-optional-chaining": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@swc/core": "^1.15.1",
+    "babel-loader": "^10.0.0",
+    "chalk": "^4.1.2",
+    "commander": "^14.0.2",
+    "core-js": "^3.47.0",
+    "cross-spawn": "^7.0.6",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.5",
+    "less": "^4.4.2",
+    "less-loader": "^12.3.0",
+    "mini-css-extract-plugin": "^2.9.4",
+    "rimraf": "^6.1.0",
+    "sass": "^1.93.2",
+    "sass-loader": "^16.0.6",
+    "style-loader": "^4.0.0",
+    "typescript": "^5.9.3",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-merge": "^6.0.1"
+  },
+  "devDependencies": {
+    "classnames": "^2.5.1",
+    "cross-env": "^10.1.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "engines": {
+    "node": ">=20.x"
+  },
+  "peerDependencies": {
+    "webpack": ">=5.x"
+  },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom"
+  }
+}

package/utils/file.js

@@ -0,0 +1,157 @@
+const {
+    resolve: resolvePath,
+    relative: relativePath,
+    extname: extnamePath,
+    dirname: dirnamePath,
+    isAbsolute: isAbsolutePath,
+} = require('path');
+const { readdirSync, statSync, existsSync } = require('fs');
+const { rimraf } = require('rimraf');
+const { ROOT, BUILD_FILE_NAME } = require('../config/PATH.js');
+
+// 查询将要使用的文件是否存在
+const checkFileExist = (path) => {
+    return existsSync(path);
+}
+
+const regMatch = (str, reg) => {
+    if (reg instanceof RegExp) {
+        return reg.test(str);
+    }
+    return reg(str) || false;
+};
+
+// 递归读取目录并生成输入文件列表 level 不等于1 则不查询子目录
+const getFiles = (dir, reg, level = 1) => {
+    if (!checkFileExist(dir)) return [];
+    const files = readdirSync(dir).map((file) => {
+        const filePath = resolvePath(dir, file);
+        const isDirectory = statSync(filePath).isDirectory();
+        return isDirectory && level === 1 ? getFiles(filePath, reg) : filePath;
+    });
+    return files.flat().filter((file) => regMatch(file, reg));
+};
+
+// 递归读取多入口文件目录（并删除inputDir路径）
+const inputMultiple = (inputDir, rmDir = '', options) => {
+    const { reg = /\.(t|j)sx?$/, level = 1 } = options || {};
+    return Object.fromEntries(
+        getFiles(inputDir, reg, level).map((file) => {
+            return [
+                relativePath(
+                    rmDir,
+                    file.slice(0, file.length - extnamePath(file).length)
+                ),
+                resolvePath(process.cwd(), file),
+            ];
+        })
+    );
+};
+
+// 根据设定类型输出output -> library 库属性
+const outputLibrary = (type, options) => {
+    // 根据不同的格式类型提供默认配置
+    const defaultOptions = {
+        // 基础配置
+        type
+    };
+
+    // 根据不同的格式类型添加特定配置
+    switch (type) {
+        case 'var':
+        case 'assign':
+        case 'assign-properties':
+        case 'this':
+        case 'window':
+        case 'self':
+        case 'global':
+            // 这些格式通常用于浏览器环境，需要一个全局变量名
+            defaultOptions.name = options?.name || 'lib';
+            break;
+        case 'commonjs':
+        case 'commonjs2':
+        case 'commonjs-module':
+        case 'commonjs-static':
+            // CommonJS格式，不需要全局变量名
+            break;
+        case 'amd':
+        case 'amd-require':
+            // AMD格式，需要一个模块名
+            defaultOptions.name = options?.name || 'lib';
+            break;
+        case 'umd':
+        case 'umd2':
+            // UMD格式，需要同时支持浏览器和CommonJS环境
+            defaultOptions.name = options?.name || 'lib';
+            defaultOptions.auxiliaryComment = {
+                amd: 'This is an AMD module',
+                commonjs: 'This is a CommonJS module',
+                commonjs2: 'This is a CommonJS2 module',
+                root: 'This is a global variable'
+            };
+            break;
+        case 'module':
+            // ES模块格式，不需要额外配置，特别是不能设置name属性
+            break;
+        default:
+            // 未知格式，使用默认配置
+            break;
+    }
+
+    return {
+        ...defaultOptions,
+        ...options,
+    };
+};
+
+// 获取指定文件 (从构建目录开始)
+const getResolvePath = (
+    path,
+    dir = dirnamePath(__dirname)
+) => {
+    const getPath = isAbsolutePath(path) ? path : resolvePath(dir, path);
+    return getPath;
+};
+
+// 获取项目自定义配置文件 lib.config.(t|j)s
+const getCustomConfig = () => {
+    // 尝试加载的配置文件列表
+    const configFileNames = BUILD_FILE_NAME;
+    for (const fileName of configFileNames) {
+        const buildConfigPath = getResolvePath(fileName, ROOT);
+        // 如果文件不存在，继续尝试下一个
+        if (!checkFileExist(buildConfigPath)) continue;
+        let conf;
+        try {
+            // 清除缓存，确保每次都重新加载文件
+            if (require.cache[require.resolve(buildConfigPath)]) {
+                delete require.cache[require.resolve(buildConfigPath)];
+            }
+            // 直接使用require加载配置文件
+            conf = require(buildConfigPath);
+            // 如果是ES模块导出，提取default属性
+            conf = conf.default || conf;
+            return conf;
+        } catch (error) {
+            console.error(' 配置文件加载失败 => ', error);
+            continue;
+        }
+    }
+    return null;
+};
+
+// 删除项目内的文件
+const removeFile = (name) => {
+    const path = getResolvePath(name, ROOT);
+    if (name && name !== './' && name !== '/' && checkFileExist(path) && path != './') rimraf(path);
+}
+
+module.exports = {
+    inputMultiple,
+    outputLibrary,
+    getResolvePath,
+    getCustomConfig,
+    checkFileExist,
+    removeFile,
+    getFiles
+}

package/utils/parserExportFile.js

@@ -0,0 +1,115 @@
+// 动态检测所有通过index文件导出的自有文件，并将它们声明为外部依赖
+const fs = require('fs');
+const path = require('path');
+const { parse } = require('@babel/parser');
+
+// 读取文件内容
+const readFile = (filePath) => {
+    return fs.readFileSync(filePath, 'utf8');
+}
+
+// 解析文件，提取所有通过
+// export { default as xxx } from 'xxx'或export { xxx }
+// 相对路径导出的自有文件
+const extractExportedFiles = (filePath) => {
+    const exportedFiles = [];
+    const importMap = {}; // 存储import语句的映射关系
+    const fileContent = readFile(filePath);
+    // 根据文件扩展名自动选择解析插件
+    const fileExtension = path.extname(filePath).toLowerCase();
+    const plugins = fileExtension === '.ts' || fileExtension === '.tsx' ? ['typescript'] : [];
+    const ast = parse(fileContent, {
+        sourceType: 'module',
+        plugins: plugins
+    });
+    // 遍历AST树，找到所有的import/export语句
+    ast.program.body.forEach(node => {
+        if (node?.type === 'ImportDeclaration' && node?.specifiers?.length > 0 && node?.source) {
+            // 存储import语句的映射关系
+            node.specifiers.forEach(specifier => {
+                if (specifier?.type === 'ImportDefaultSpecifier') {
+                    // import xxx from './xxx';
+                    importMap[specifier?.local?.name] = node?.source?.value;
+                } else if (specifier?.type === 'ImportSpecifier') {
+                    // import { xxx } from './xxx';
+                    importMap[specifier?.local?.name] = node?.source?.value;
+                }
+            });
+        }
+        // 处理导出语句
+        if (node?.type === 'ExportNamedDeclaration' || node?.type === 'ExportAllDeclaration') {
+            // 处理 export * from 'xxx' 这种形式的导出
+            if (node?.type === 'ExportAllDeclaration' && node?.source?.value?.startsWith('./')) {
+                exportedFiles.push(node.source.value);
+            }
+            // 处理 export { xxx as xx } from 'xxx' 这种形式的导出
+            else if (node?.type === 'ExportNamedDeclaration' && node?.source?.value?.startsWith('./')) {
+                // 只要是从相对路径导出的，不管是默认导出还是命名导出，都需要添加到externals中
+                exportedFiles.push(node.source.value);
+            }
+            // 处理 export { xxx } 这种形式的导出
+            else if (node?.type === 'ExportNamedDeclaration' && !node?.source && node?.specifiers?.length > 0) {
+                node.specifiers.forEach(specifier => {
+                    if (specifier?.type === 'ExportSpecifier') {
+                        const importPath = importMap[specifier?.local?.name];
+                        if (importPath && importPath.startsWith('./')) {
+                            // 提取相对路径
+                            exportedFiles.push(importPath);
+                        }
+                    }
+                });
+            }
+        }
+    });
+    return exportedFiles;
+}
+
+// 找到所有将要编译的文件夹下的index文件
+const findIndexFiles = (dirPath, options) => {
+    const {
+        isPollingChild = false, // 是否递归遍历子目录
+        findFiles = ['index.ts', 'index.js', 'index.tsx', 'index.jsx'] // 要查找的文件名
+    } = options || {};
+    const indexFiles = [];
+    const traverseDir = (currentDir) => {
+        const files = fs.readdirSync(currentDir);
+        files.forEach(file => {
+            const filePath = path.join(currentDir, file);
+            const fileStat = fs.statSync(filePath);
+            if (fileStat.isDirectory() && isPollingChild) {
+                // 递归遍历子目录
+                traverseDir(filePath);
+            } else if (fileStat.isFile() && findFiles.includes(file)) {
+                // 找到文件
+                indexFiles.push(filePath);
+            }
+        });
+    }
+    traverseDir(dirPath);
+    return indexFiles;
+}
+
+const getComponentExternals = (compileDir, ROOT) => {
+    const componentsDir = path.isAbsolute(compileDir) ? compileDir : path.join(ROOT, compileDir);
+    // 检查目录是否存在
+    if (!fs.existsSync(componentsDir) || !fs.statSync(componentsDir).isDirectory()) return {};
+    const indexFiles = findIndexFiles(componentsDir);
+    const allExportedFiles = [];
+    // 提取所有index文件中导出的自有文件
+    indexFiles.forEach(indexFile => {
+        const exportedFiles = extractExportedFiles(indexFile);
+        allExportedFiles.push(...exportedFiles);
+    });
+
+    // 去重
+    const uniqueExportedFiles = [...new Set(allExportedFiles)];
+    // 将所有导出的自有文件加入到externals中
+    const componentExternals = uniqueExportedFiles.reduce((externals, file) => {
+        externals[file] = file;
+        return externals;
+    }, {});
+
+    return componentExternals;
+}
+
+module.exports = getComponentExternals;

package/utils/util.js

@@ -0,0 +1,96 @@
+const spawn = require('cross-spawn');
+const chalk = require('chalk');
+
+// 时间戳转换为 HH:mm:ss 格式
+const timestampToHMS = (timestamp) => {
+    const date = new Date(timestamp);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+
+// 计算时间差（单位：秒）
+const DateTimeDiffS = (endTime, startTime) => {
+    if (typeof startTime == 'number' && typeof endTime == 'number') {
+        // 向上取整
+        return endTime - startTime >= 1000 ? `${Math.round(((endTime - startTime) / 1000) * 100) / 100}s` : `${endTime - startTime}ms`;
+    }
+    return 0 - 1;
+}
+
+// spawn promise 封装
+const spawnPromise = (command, args, options = {}) => {
+    return new Promise((resolve, reject) => {
+        const cross = spawn(command, args, options);
+        cross.on('close', (code) => {
+            if (code != 0) {
+                return reject(new Error(`进程[${command}]命令执行失败：退出码 ${code}`));
+            }
+            resolve(1);
+        });
+
+        cross.on('exit', function (code, signal) {
+            if (signal) {
+                console.log(chalk.bold.red(`进程 [${command}] 命令退出：信号 ${signal} 退出码 ${code}`));
+                reject(new Error(`进程 [${command}] 命令退出：信号 ${signal} 退出码 ${code}`));
+            }
+        });
+    });
+}
+
+// 判断传入变量是否是对象
+const isObject = (obj) => {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+/**
+ * 获取css引入的最后一个 / 前的字符
+ * @param {string} str 目标字符串（如路径、URL）
+ * @returns {fileName, folderName, generateFolderName} fileName: 文件名, folderName: 文件夹名, generateFolderName: 生成的文件夹名   
+ */
+const getBeforeLastSlash = (str) => {
+    // // 捕获最后一个 / 之前的所有字符(文件夹名)
+    let folderInfo = null;
+    if (str.indexOf('/') !== -1) {
+        const strArr = str.split('/');
+        // 移除最后一个元素（文件名）
+        const fileName = strArr[strArr.length - 1];
+        const lastButOneStr = strArr.length > 2 ? strArr[strArr.length - 2] : 'style';
+        folderInfo = {
+            fileName,
+            folderName: lastButOneStr,
+            generateFolderName: strArr[0],
+        }
+    }
+    return folderInfo;
+}
+
+/**
+ * 从完整路径中提取最后一级文件夹名和文件名
+ * @param fullPath 完整文件路径
+ * @returns { folderName: string, fileName: string } | null
+ */
+function getLastFolderAndFile(fullPath) {
+    // 核心正则：兼容 / \ 分隔符，排除文件后缀
+    const regex = /[\\/]([^\\/]+)[\\/]([^\\/.]+)(?:\.[^\\/]+)?$/;
+    const match = fullPath.match(regex);
+
+    if (match) {
+        return {
+            folderName: match[1],
+            fileName: match[2]
+        };
+    }
+
+    return null; // 路径格式不合法时返回 null
+}
+
+module.exports = {
+    getLastFolderAndFile,
+    getBeforeLastSlash,
+    timestampToHMS,
+    DateTimeDiffS,
+    spawnPromise,
+    isObject,
+}