wb-lib-tool 0.0.1-beta.3 → 0.0.1-beta.5

package/README.md

@@ -36,7 +36,7 @@ wb-lib dev
 | 属性 | 类型  | 说明 |
 | ---- | --------------- | ---- |
 **format** | Object｜Array｜string  | 生成格式配置【可配置类型 ['module','commonjs']等】，默认值为 `module` |
-**output** | String | 输出存放文件夹，默认值为 `lib` |
+**outputDir** | 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]）` |
@@ -50,20 +50,20 @@ import { resolve } from 'path';
 
 export default {
     compileDir: 'src/components', // 默认编译目录
-    output: 'lib', // 输出存放文件夹
+    outputDir: 'lib', // 输出存放文件夹
     clean: true, // 是否在打包前清除存放文件夹
 
     //【format 使用方式1】
-    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [output]目录下【默认生成module格式】
+    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [outputDir]目录下【默认生成module格式】
 
     //【format 使用方式2】
-    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [output]/(module｜commonjs) 目录下
+    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [outputDir]/(module｜commonjs) 目录下
 
     //【format 使用方式3】
     format: {
-        // 生成 module 类型 同时相关代码文件放入到 [output]/es 目录下
+        // 生成 module 类型 同时相关代码文件放入到 [outputDir]/es 目录下
         module: 'es', 
-        // 生成 commonjs 类型 同时相关代码文件放入到 [output]/cjs 目录下
+        // 生成 commonjs 类型 同时相关代码文件放入到 [outputDir]/cjs 目录下
         commonjs: 'cjs', 
     },
  
@@ -91,22 +91,25 @@ export default {
 
 ###### 使用lib.config.js
 ```
+const path = require('path');
+const { merge } = require('webpack-merge');
+
 module.exports = {
     compileDir: 'src/components', // 默认编译目录
-    output: 'lib', // 输出存放文件夹
+    outputDir: 'lib', // 输出存放文件夹
     clean: true, // 是否在打包前清除存放文件夹
 
     //【format 使用方式1】
-    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [output]目录下【默认生成module格式】
+    format: 'module', // 生成 module 格式的文件 同时相关代码文件放入到 [outputDir]目录下【默认生成module格式】
 
     //【format 使用方式2】
-    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [output]/(module｜commonjs) 目录下
+    format: ['module', 'commonjs'], // 分别生成 module 和 commonjs 类型 同时相关代码文件放入到 [outputDir]/(module｜commonjs) 目录下
 
     //【format 使用方式3】
     format: {
-        // 生成 module 类型 同时相关代码文件放入到 [output]/es 目录下
+        // 生成 module 类型 同时相关代码文件放入到 [outputDir]/es 目录下
         module: 'es', 
-        // 生成 commonjs 类型 同时相关代码文件放入到 [output]/cjs 目录下
+        // 生成 commonjs 类型 同时相关代码文件放入到 [outputDir]/cjs 目录下
         commonjs: 'cjs', 
     },
  
@@ -154,7 +157,7 @@ module.exports = {
 **<font size="2">format 使用方式1</font>**
 ```
 ├── ...                        # 其他文件
-├── [output]/                  # 输出存放文件夹
+├── [outputDir]/                  # 输出存放文件夹
 │   ├── button/                # 组件目录
 │   │   ├── index.js           # 组件入口文件
 │   │   ├── style/             # 组件样式目录
@@ -167,7 +170,7 @@ module.exports = {
 **<font size="2">format 使用方式2</font>**
 ```
 ├── ...                        # 其他文件
-├── [output]/                  # 输出存放文件夹     
+├── [outputDir]/                  # 输出存放文件夹     
 │   ├── module/                # module 格式代码目录
 │   │   ├── button/            # 组件目录
 │   │   │   ├── index.js       # 组件入口文件
@@ -189,7 +192,7 @@ module.exports = {
 **<font size="2">format 使用方式3</font>**
 ```
 ├── ...                        # 其他文件
-├── [output]/                  # 输出存放文件夹
+├── [outputDir]/                  # 输出存放文件夹
 │   ├── es/                    # module 格式代码目录
 │   │   ├── button/            # 组件目录
 │   │   │   ├── index.js       # 组件入口文件

package/bin/dev.js

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

package/bin/index.js

@@ -6,7 +6,6 @@ const packageJson = require('../package.json');
 
 const program = new Command(packageJson.name);
 
-
 program.version(packageJson.version);
 program.command('lib').action(() => {
     require('./lib.js');
@@ -19,16 +18,6 @@ program.command('clean').option('-n, --name <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('')
@@ -36,10 +25,6 @@ const handleError = (error, _exitStatus = 1) => {
         `进程出错! \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

@@ -1,8 +1,8 @@
 const chalk = require('chalk');
+const webpackPath = require.resolve('webpack/bin/webpack');
 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;
@@ -17,7 +17,7 @@ const spawnBuildLib = async () => {
     console.log(' ');
     if (Array.isArray(format)) {
         isRun = true;
-        await Promise.all(format.map(type => spawnPromise('webpack', [
+        await Promise.all(format.map(type => spawnPromise(webpackPath, [
             '--config',
             `${getResolvePath('config/webpack.lib.conf.js')}`,
             '--progress', '--color',
@@ -25,10 +25,10 @@ const spawnBuildLib = async () => {
             `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', [
+        await Promise.all(Object.keys(format).map(key => spawnPromise(webpackPath, [
             '--config',
             `${getResolvePath('config/webpack.lib.conf.js')}`,
             '--progress', '--color',
@@ -37,17 +37,17 @@ const spawnBuildLib = async () => {
             `libName=${format[key]}`,
             `output=${output}`,
             ...process.argv.slice(3),
-        ], { stdio: 'inherit' })));
+        ])));
     }
     if (!isRun || isMerageAll) {
-        await spawnPromise('webpack', ['--config',
+        await spawnPromise(webpackPath, ['--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)}`));

package/config/webpack.base.conf.js

@@ -1,5 +1,6 @@
 const { getResolvePath } = require('../utils/file');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const babelLoader = require.resolve('babel-loader');
 
 const baseConfig = (env) => {
     const isDev = env === 'development';
@@ -81,7 +82,7 @@ const baseConfig = (env) => {
                     exclude: /node_modules/,
                     use: [
                         {
-                            loader: 'babel-loader',
+                            loader: babelLoader,
                             options: {
                                 configFile: getResolvePath('babel.config.json', __dirname),
                             },

package/config/webpack.lib.conf.js

@@ -4,7 +4,7 @@ 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, checkFileExist } = require('../utils/file.js');
+const { getCustomConfig, checkFileExist, getResolvePath } = require('../utils/file.js');
 const getComponentExternals = require('../utils/parserExportFile.js');
 const baseConfig = require('./webpack.base.conf.js');
 const multiOutputConfig = require('./output.multi.js');
@@ -40,7 +40,7 @@ const getLibConfig = function ({
             'react-router-dom': 'react-router-dom',
         },
         optimization: {
-            minimize: false, // 是否开启压缩
+            minimize: true, // 是否开启压缩
             moduleIds: 'deterministic',
             minimizer: [
                 new TerserPlugin({
@@ -235,6 +235,7 @@ const getLibConfig = function ({
         }
     }
     const lastConfig = merge(outputConfig, buildConfig, { entry: defaultEntry, externals: getcompoentExternals });
+    if (lastConfig.output.path != getResolvePath(output, ROOT)) lastConfig.output.path = getResolvePath(output, ROOT);
     return lastConfig;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wb-lib-tool",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.5",
   "description": "基于webpack库模式编译生成组件库",
   "license": "MIT",
   "readme": "README.ch.md",
@@ -63,6 +63,7 @@
     "sass": "^1.93.2",
     "sass-loader": "^16.0.6",
     "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.16",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "webpack": "^5.102.1",
@@ -86,5 +87,15 @@
   "overrides": {
     "react": "$react",
     "react-dom": "$react-dom"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "@swc/core",
+      "core-js",
+      "core-js",
+      "esbuild",
+      "less"
+    ]
   }
 }

package/utils/file.js

@@ -7,7 +7,7 @@ const {
 } = require('path');
 const { readdirSync, statSync, existsSync } = require('fs');
 const { rimraf } = require('rimraf');
-const { getTsFileExportContent } = require('./getTsContent.js');
+const { getFileExportContent } = require('./getFileContent.js');
 const { ROOT, BUILD_FILE_NAME } = require('../config/PATH.js');
 
 // 查询将要使用的文件是否存在
@@ -124,21 +124,10 @@ const getCustomConfig = () => {
         if (!checkFileExist(buildConfigPath)) continue;
         let conf = null;
         try {
-            if (extnamePath(buildConfigPath) === '.js') {
-                // 清除缓存，确保每次都重新加载文件
-                if (require.cache[require.resolve(buildConfigPath)]) {
-                    delete require.cache[require.resolve(buildConfigPath)];
-                }
-                // 直接使用require加载配置文件
-                conf = require(buildConfigPath);
-                // 如果是ES模块导出，提取default属性
-                conf = conf.default || conf;
-            } else {
-                conf = getTsFileExportContent(buildConfigPath);
-            }
+            conf = getFileExportContent(buildConfigPath);
             return conf;
         } catch (error) {
-            console.error(' 配置文件加载失败 => \n', error);
+            console.error(' 配置文件加载失败 => \n', error, '\n');
             continue;
         }
     }

package/utils/{getTsContent.js → getFileContent.js}

@@ -1,4 +1,4 @@
-const getTsFileExportContent = (filePath) => {
+const getFileExportContent = (filePath) => {
     if (!filePath) return null;
     let exports = null;
     require('ts-node').register({
@@ -11,10 +11,10 @@ const getTsFileExportContent = (filePath) => {
         }
     });
     // 直接加载原文件，自动处理所有依赖
-    exports = require(filePath).default; // 取 export default
+    exports = require(filePath).default || require(filePath); // 取 export default
     return exports;
 }
 
 module.exports = {
-    getTsFileExportContent
+    getFileExportContent
 }

package/utils/util.js

@@ -22,7 +22,7 @@ const DateTimeDiffS = (endTime, startTime) => {
 // spawn promise 封装
 const spawnPromise = (command, args, options = {}) => {
     return new Promise((resolve, reject) => {
-        const cross = spawn(command, args, options);
+        const cross = spawn(command, args, Object.assign({ stdio: 'inherit' }, options));
         cross.on('close', (code) => {
             if (code != 0) {
                 return reject(new Error(`进程[${command}]命令执行失败：退出码 ${code}`));