wb-lib-tool 0.0.1-beta.1 → 0.0.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{README.ch.md → README.md} +20 -9
- package/config/webpack.dev.conf.js +9 -9
- package/config/webpack.lib.conf.js +2 -2
- package/package.json +13 -7
- package/utils/file.js +14 -9
- package/utils/getTsContent.js +20 -0
|
@@ -47,11 +47,6 @@ wb-lib dev
|
|
|
47
47
|
```
|
|
48
48
|
import { merge } from 'webpack-merge';
|
|
49
49
|
import { resolve } from 'path';
|
|
50
|
-
import { fileURLToPath } from 'url';
|
|
51
|
-
|
|
52
|
-
// 在ES模块中获取__dirname
|
|
53
|
-
const __filename = fileURLToPath(import.meta.url);
|
|
54
|
-
const __dirname = resolve(__filename, '..');
|
|
55
50
|
|
|
56
51
|
export default {
|
|
57
52
|
compileDir: 'src/components', // 默认编译目录
|
|
@@ -79,9 +74,17 @@ export default {
|
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
//【webpackConf 使用方式2 webpack 配置项】
|
|
82
|
-
webpackConf: function (
|
|
77
|
+
webpackConf: function (config, env,format) {
|
|
83
78
|
// 自定义 webpack 配置项
|
|
84
|
-
|
|
79
|
+
const customConfig = merge(config, {
|
|
80
|
+
entry: resolve(__dirname, 'xxxx'), // dev命令 入口文件
|
|
81
|
+
resolve: {
|
|
82
|
+
alias: {
|
|
83
|
+
"xx": resolve(__dirname, 'xxxx') // 资源路径别名
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
})
|
|
87
|
+
return customConfig;
|
|
85
88
|
},
|
|
86
89
|
}
|
|
87
90
|
```
|
|
@@ -114,9 +117,17 @@ module.exports = {
|
|
|
114
117
|
}
|
|
115
118
|
|
|
116
119
|
//【webpackConf 使用方式2 webpack 配置项】
|
|
117
|
-
webpackConf: function (
|
|
120
|
+
webpackConf: function (config, env,format) {
|
|
118
121
|
// 自定义 webpack 配置项
|
|
119
|
-
|
|
122
|
+
const customConfig = merge(config, {
|
|
123
|
+
entry: path.resolve(__dirname, 'xxxx'), // dev命令 入口文件
|
|
124
|
+
resolve: {
|
|
125
|
+
alias: {
|
|
126
|
+
"xx": path.resolve(__dirname, 'xxxx) // 资源路径别名
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
})
|
|
130
|
+
return customConfig;
|
|
120
131
|
},
|
|
121
132
|
|
|
122
133
|
};
|
|
@@ -4,9 +4,14 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
|
4
4
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
5
5
|
const baseConfig = require('./webpack.base.conf.js');
|
|
6
6
|
const { SRC, ROOT } = require('./PATH.js');
|
|
7
|
-
const { getCustomConfig, getFiles,getResolvePath } = require('../utils/file.js');
|
|
7
|
+
const { getCustomConfig, getFiles, getResolvePath, checkFileExist } = require('../utils/file.js');
|
|
8
8
|
const currentEnv = 'development';
|
|
9
9
|
|
|
10
|
+
// 获取并匹配src目录下的index.tsx或index.jsx文件
|
|
11
|
+
const indexFiles = getFiles(SRC, /index\.(j|t)sx$/, 0);
|
|
12
|
+
// 获取根目录总index.html文件
|
|
13
|
+
const rootIndexHtml = getFiles(ROOT, /index\.html$/, 0)[0];
|
|
14
|
+
|
|
10
15
|
const customConfig = getCustomConfig();
|
|
11
16
|
|
|
12
17
|
/**
|
|
@@ -26,18 +31,12 @@ function getFileByPriority(filePathArr = indexFiles, priorities = ['index.tsx',
|
|
|
26
31
|
|
|
27
32
|
const customWebpackConf = customConfig && customConfig.webpackConf ? customConfig.webpackConf : null;
|
|
28
33
|
|
|
29
|
-
// 获取并匹配src目录下的index.tsx或index.jsx文件
|
|
30
|
-
const indexFiles = getFiles(SRC, /index\.(j|t)sx$/, 0);
|
|
31
|
-
// 获取根目录总index.html文件
|
|
32
|
-
const rootIndexHtml = getFiles(ROOT, /index\.html$/, 0)[0];
|
|
33
|
-
|
|
34
34
|
const entryFile = getFileByPriority();
|
|
35
35
|
|
|
36
36
|
// 默认获取src目录下的index.tsx
|
|
37
37
|
|
|
38
38
|
const getDevConfig = () => {
|
|
39
|
-
if (!entryFile && (!process.env.TEST || process.env.TEST == 'false')) throw new Error('
|
|
40
|
-
|
|
39
|
+
if (checkFileExist(SRC) && !entryFile && (!process.env.TEST || process.env.TEST == 'false')) throw new Error('请在src目录下创建index.tsx或index.jsx文件');
|
|
41
40
|
let buildConfig = merge(baseConfig(currentEnv), {
|
|
42
41
|
mode: 'development',
|
|
43
42
|
cache: true,
|
|
@@ -64,7 +63,7 @@ const getDevConfig = () => {
|
|
|
64
63
|
chunkFilename: 'css/[name]-[contenthash:7].css',
|
|
65
64
|
ignoreOrder: true,
|
|
66
65
|
}),
|
|
67
|
-
new HtmlWebpackPlugin({
|
|
66
|
+
new HtmlWebpackPlugin({
|
|
68
67
|
template: !!rootIndexHtml ? rootIndexHtml : getResolvePath('./index.html', __dirname),
|
|
69
68
|
filename: 'index.html',
|
|
70
69
|
chunksSortMode: 'none',
|
|
@@ -78,6 +77,7 @@ const getDevConfig = () => {
|
|
|
78
77
|
} else {
|
|
79
78
|
buildConfig = merge(buildConfig, customWebpackConf || {});
|
|
80
79
|
};
|
|
80
|
+
if (!checkFileExist(SRC) && !buildConfig.entry) throw new Error('未找到入口 `entry`');
|
|
81
81
|
return buildConfig;
|
|
82
82
|
};
|
|
83
83
|
|
|
@@ -4,7 +4,7 @@ const { BannerPlugin } = require('webpack');
|
|
|
4
4
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
5
5
|
const TerserPlugin = require('terser-webpack-plugin');
|
|
6
6
|
const { OUTPUT, DEFAULT_FORMAT, ROOT, COMPILE_DIR } = require('./PATH.js');
|
|
7
|
-
const { getCustomConfig } = require('../utils/file.js');
|
|
7
|
+
const { getCustomConfig, checkFileExist } = require('../utils/file.js');
|
|
8
8
|
const getComponentExternals = require('../utils/parserExportFile.js');
|
|
9
9
|
const baseConfig = require('./webpack.base.conf.js');
|
|
10
10
|
const multiOutputConfig = require('./output.multi.js');
|
|
@@ -12,7 +12,6 @@ const { getBeforeLastSlash, getLastFolderAndFile } = require('../utils/util.js')
|
|
|
12
12
|
|
|
13
13
|
const currentEnv = 'library';
|
|
14
14
|
|
|
15
|
-
|
|
16
15
|
const customConfig = getCustomConfig();
|
|
17
16
|
|
|
18
17
|
const customWebpackConf = customConfig && customConfig.webpackConf ? customConfig.webpackConf : null;
|
|
@@ -30,6 +29,7 @@ const getLibConfig = function ({
|
|
|
30
29
|
// 使用自定义的多入口配置
|
|
31
30
|
const outputConfig = multiOutputConfig({ format, libName: outputAliasDirName, output, compileDir });
|
|
32
31
|
const defaultEntry = outputConfig.entry;
|
|
32
|
+
if (!checkFileExist(compileDir) && (!process.env.TEST || process.env.TEST == 'false')) throw new Error(`缺少${compileDir}目录`);
|
|
33
33
|
|
|
34
34
|
let buildConfig = merge(baseConfig(currentEnv), {
|
|
35
35
|
target: !isModule ? ['web', 'es5'] : 'web',
|
package/package.json
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wb-lib-tool",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.3",
|
|
4
4
|
"description": "基于webpack库模式编译生成组件库",
|
|
5
5
|
"license": "MIT",
|
|
6
|
+
"readme": "README.ch.md",
|
|
6
7
|
"bin": {
|
|
7
8
|
"wb-lib": "./bin/index.js"
|
|
8
9
|
},
|
|
9
10
|
"scripts": {
|
|
10
|
-
"lib": "
|
|
11
|
-
"dev": "
|
|
12
|
-
"clean": "
|
|
11
|
+
"lib": "wb-lib lib",
|
|
12
|
+
"dev": "wb-lib dev",
|
|
13
|
+
"clean": "wb-lib clean --name lib",
|
|
14
|
+
"lib:test": "node ./bin/index.js lib",
|
|
15
|
+
"dev:test": "cross-env TEST=true node ./bin/index.js dev",
|
|
16
|
+
"clean:test": "node ./bin/index.js clean --name lib"
|
|
13
17
|
},
|
|
14
18
|
"keywords": [
|
|
15
19
|
"lib",
|
|
@@ -59,6 +63,7 @@
|
|
|
59
63
|
"sass": "^1.93.2",
|
|
60
64
|
"sass-loader": "^16.0.6",
|
|
61
65
|
"style-loader": "^4.0.0",
|
|
66
|
+
"ts-node": "^10.9.2",
|
|
62
67
|
"typescript": "^5.9.3",
|
|
63
68
|
"webpack": "^5.102.1",
|
|
64
69
|
"webpack-cli": "^6.0.1",
|
|
@@ -69,13 +74,14 @@
|
|
|
69
74
|
"classnames": "^2.5.1",
|
|
70
75
|
"cross-env": "^10.1.0",
|
|
71
76
|
"react": "^19.2.1",
|
|
72
|
-
"react-dom": "^19.2.1"
|
|
77
|
+
"react-dom": "^19.2.1",
|
|
78
|
+
"wb-lib-tool": "^0.0.1-beta.1"
|
|
73
79
|
},
|
|
74
80
|
"engines": {
|
|
75
|
-
"node": ">=
|
|
81
|
+
"node": ">=16.18"
|
|
76
82
|
},
|
|
77
83
|
"peerDependencies": {
|
|
78
|
-
"webpack": ">=5
|
|
84
|
+
"webpack": ">=5"
|
|
79
85
|
},
|
|
80
86
|
"overrides": {
|
|
81
87
|
"react": "$react",
|
package/utils/file.js
CHANGED
|
@@ -7,6 +7,7 @@ const {
|
|
|
7
7
|
} = require('path');
|
|
8
8
|
const { readdirSync, statSync, existsSync } = require('fs');
|
|
9
9
|
const { rimraf } = require('rimraf');
|
|
10
|
+
const { getTsFileExportContent } = require('./getTsContent.js');
|
|
10
11
|
const { ROOT, BUILD_FILE_NAME } = require('../config/PATH.js');
|
|
11
12
|
|
|
12
13
|
// 查询将要使用的文件是否存在
|
|
@@ -121,19 +122,23 @@ const getCustomConfig = () => {
|
|
|
121
122
|
const buildConfigPath = getResolvePath(fileName, ROOT);
|
|
122
123
|
// 如果文件不存在,继续尝试下一个
|
|
123
124
|
if (!checkFileExist(buildConfigPath)) continue;
|
|
124
|
-
let conf;
|
|
125
|
+
let conf = null;
|
|
125
126
|
try {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
if (extnamePath(buildConfigPath) === '.js') {
|
|
128
|
+
// 清除缓存,确保每次都重新加载文件
|
|
129
|
+
if (require.cache[require.resolve(buildConfigPath)]) {
|
|
130
|
+
delete require.cache[require.resolve(buildConfigPath)];
|
|
131
|
+
}
|
|
132
|
+
// 直接使用require加载配置文件
|
|
133
|
+
conf = require(buildConfigPath);
|
|
134
|
+
// 如果是ES模块导出,提取default属性
|
|
135
|
+
conf = conf.default || conf;
|
|
136
|
+
} else {
|
|
137
|
+
conf = getTsFileExportContent(buildConfigPath);
|
|
129
138
|
}
|
|
130
|
-
// 直接使用require加载配置文件
|
|
131
|
-
conf = require(buildConfigPath);
|
|
132
|
-
// 如果是ES模块导出,提取default属性
|
|
133
|
-
conf = conf.default || conf;
|
|
134
139
|
return conf;
|
|
135
140
|
} catch (error) {
|
|
136
|
-
console.error(' 配置文件加载失败 => ', error);
|
|
141
|
+
console.error(' 配置文件加载失败 => \n', error);
|
|
137
142
|
continue;
|
|
138
143
|
}
|
|
139
144
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const getTsFileExportContent = (filePath) => {
|
|
2
|
+
if (!filePath) return null;
|
|
3
|
+
let exports = null;
|
|
4
|
+
require('ts-node').register({
|
|
5
|
+
transpileOnly: true, // 只编译不做类型检查,提升速度
|
|
6
|
+
compilerOptions: {
|
|
7
|
+
module: 'CommonJS', // 强制编译为 CommonJS,适配当前环境
|
|
8
|
+
target: 'ES6',
|
|
9
|
+
esModuleInterop: true, // 关键:兼容 ES 模块的 export default
|
|
10
|
+
skipLibCheck: true
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
// 直接加载原文件,自动处理所有依赖
|
|
14
|
+
exports = require(filePath).default; // 取 export default
|
|
15
|
+
return exports;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
module.exports = {
|
|
19
|
+
getTsFileExportContent
|
|
20
|
+
}
|