@lark-apaas/fullstack-rspack-preset 0.1.2-alpha.5 → 0.1.2-alpha.7
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/lib/index.d.ts +0 -1
- package/lib/index.js +0 -2
- package/lib/preset.js +1 -1
- package/lib/rspack-plugins/slardar-performance-monitor-plugin.d.ts +2 -1
- package/lib/rspack-plugins/slardar-performance-monitor-plugin.js +31 -20
- package/lib/rspack-plugins/view-context-injection-plugin.d.ts +0 -1
- package/lib/rspack-plugins/view-context-injection-plugin.js +24 -14
- package/package.json +3 -2
- package/preset.config.js +16 -0
- package/lib/react-refresh-plugin.d.ts +0 -3
- package/lib/react-refresh-plugin.js +0 -11
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
package/lib/preset.js
CHANGED
|
@@ -129,7 +129,7 @@ function createRecommendRspackConfig(options) {
|
|
|
129
129
|
'process.env.runtimeMode': JSON.stringify('fullstack'),
|
|
130
130
|
'process.env.CLIENT_BASE_PATH': JSON.stringify(clientBasePath),
|
|
131
131
|
// FIXME:安全漏洞，会读取到服务路径，不应该在客户端代码中使用
|
|
132
|
-
'process.env.CWD': JSON.stringify(
|
|
132
|
+
'process.env.CWD': JSON.stringify(''),
|
|
133
133
|
// 解决 window 未定义问题
|
|
134
134
|
'typeof window': JSON.stringify('object'),
|
|
135
135
|
window: 'globalThis',
|
|
@@ -32,21 +32,35 @@ class SlardarPerformanceMonitorPlugin {
|
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
const hooks = HtmlPlugin.getHooks(compilation);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const snippet = this.options.snippet ??
|
|
35
|
+
// 使用 alterAssetTagGroups 钩子，在标签数组层面操作
|
|
36
|
+
hooks.alterAssetTagGroups.tap('SlardarPerformanceMonitorPlugin', (data) => {
|
|
37
|
+
const snippet = this.options.snippet ?? getSlardarScriptContent({
|
|
38
|
+
bid: this.options.bid,
|
|
39
|
+
globalName: this.options.globalName,
|
|
40
|
+
});
|
|
38
41
|
if (!snippet)
|
|
39
|
-
return;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
return data;
|
|
43
|
+
// 创建 Slardar 脚本标签对象
|
|
44
|
+
const slardarTag = {
|
|
45
|
+
tagName: 'script',
|
|
46
|
+
voidTag: false,
|
|
47
|
+
innerHTML: snippet,
|
|
48
|
+
attributes: {},
|
|
49
|
+
};
|
|
50
|
+
// 找到 main.js 的索引位置
|
|
51
|
+
const mainJsIndex = data.headTags.findIndex((tag) => tag.tagName === 'script' &&
|
|
52
|
+
tag.attributes &&
|
|
53
|
+
tag.attributes.src &&
|
|
54
|
+
tag.attributes.src.includes('main.js'));
|
|
55
|
+
if (mainJsIndex !== -1) {
|
|
56
|
+
// 在 main.js 之前插入 Slardar 脚本
|
|
57
|
+
data.headTags.splice(mainJsIndex, 0, slardarTag);
|
|
42
58
|
}
|
|
43
|
-
else
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
else if (position === 'head-end') {
|
|
47
|
-
data.html = data.html.replace('</head>', `${snippet}\n</head>`);
|
|
59
|
+
else {
|
|
60
|
+
// 如果没找到 main.js，插入到 headTags 最前面
|
|
61
|
+
data.headTags.unshift(slardarTag);
|
|
48
62
|
}
|
|
49
|
-
|
|
63
|
+
return data;
|
|
50
64
|
});
|
|
51
65
|
}
|
|
52
66
|
catch (error) {
|
|
@@ -56,11 +70,10 @@ class SlardarPerformanceMonitorPlugin {
|
|
|
56
70
|
}
|
|
57
71
|
}
|
|
58
72
|
exports.default = SlardarPerformanceMonitorPlugin;
|
|
59
|
-
function
|
|
73
|
+
function getSlardarScriptContent(option = {}) {
|
|
60
74
|
const bid = option.bid || 'apaas_ai';
|
|
61
75
|
const globalName = option.globalName || 'KSlardarWeb';
|
|
62
76
|
return `
|
|
63
|
-
<script>
|
|
64
77
|
// 创建 Slardar 脚本元素
|
|
65
78
|
const slardarScript = document.createElement('script');
|
|
66
79
|
slardarScript.src = 'https://lf3-short.ibytedapm.com/slardar/fe/sdk-web/browser.cn.js?bid=${bid}&globalName=${globalName}';
|
|
@@ -69,13 +82,13 @@ function getSlardarScript(option = {}) {
|
|
|
69
82
|
// 添加 onload 事件处理
|
|
70
83
|
slardarScript.onload = function() {
|
|
71
84
|
// 脚本加载完成后执行初始化
|
|
72
|
-
if (window
|
|
73
|
-
window
|
|
74
|
-
bid: '
|
|
85
|
+
if (window.${globalName}) {
|
|
86
|
+
window.${globalName}('init', {
|
|
87
|
+
bid: '${bid}',
|
|
75
88
|
// 四种类型：dev/boe/pre/online
|
|
76
89
|
env: 'online',
|
|
77
90
|
});
|
|
78
|
-
window
|
|
91
|
+
window.${globalName}('start');
|
|
79
92
|
}
|
|
80
93
|
};
|
|
81
94
|
|
|
@@ -91,7 +104,5 @@ function getSlardarScript(option = {}) {
|
|
|
91
104
|
const performanceScript = document.createElement('script');
|
|
92
105
|
performanceScript.src = 'https://sf3-scmcdn-cn.feishucdn.com/obj/unpkg/byted/performance/0.1.0/dist/performance.iife.js';
|
|
93
106
|
document.head.appendChild(performanceScript);
|
|
94
|
-
</script>
|
|
95
|
-
|
|
96
107
|
`;
|
|
97
108
|
}
|
|
@@ -32,19 +32,29 @@ class ViewContextInjectionPlugin {
|
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
34
|
const hooks = HtmlPlugin.getHooks(compilation);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
// 使用 alterAssetTagGroups 钩子，在标签数组层面操作
|
|
36
|
+
hooks.alterAssetTagGroups.tap('ViewContextInjectionPlugin', (data) => {
|
|
37
|
+
// 创建 ViewContext 脚本标签对象
|
|
38
|
+
const viewContextTag = {
|
|
39
|
+
tagName: 'script',
|
|
40
|
+
voidTag: false,
|
|
41
|
+
innerHTML: getViewContextScriptContent(),
|
|
42
|
+
attributes: {},
|
|
43
|
+
};
|
|
44
|
+
// 找到 main.js 的索引位置
|
|
45
|
+
const mainJsIndex = data.headTags.findIndex((tag) => tag.tagName === 'script' &&
|
|
46
|
+
tag.attributes &&
|
|
47
|
+
tag.attributes.src &&
|
|
48
|
+
tag.attributes.src.includes('main.js'));
|
|
49
|
+
if (mainJsIndex !== -1) {
|
|
50
|
+
// 在 main.js 之前插入 ViewContext 脚本
|
|
51
|
+
data.headTags.splice(mainJsIndex, 0, viewContextTag);
|
|
40
52
|
}
|
|
41
|
-
else
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
else if (position === 'head-end') {
|
|
45
|
-
data.html = data.html.replace('</head>', `${snippet}\n</head>`);
|
|
53
|
+
else {
|
|
54
|
+
// 如果没找到 main.js，插入到 headTags 最前面
|
|
55
|
+
data.headTags.unshift(viewContextTag);
|
|
46
56
|
}
|
|
47
|
-
|
|
57
|
+
return data;
|
|
48
58
|
});
|
|
49
59
|
}
|
|
50
60
|
catch (error) {
|
|
@@ -54,11 +64,11 @@ class ViewContextInjectionPlugin {
|
|
|
54
64
|
}
|
|
55
65
|
}
|
|
56
66
|
exports.default = ViewContextInjectionPlugin;
|
|
57
|
-
function
|
|
58
|
-
return `
|
|
67
|
+
function getViewContextScriptContent() {
|
|
68
|
+
return `
|
|
59
69
|
window.csrfToken = "{{csrfToken}}";
|
|
60
70
|
window.userId = "{{userId}}";
|
|
61
71
|
window.tenantId = "{{tenantId}}";
|
|
62
72
|
window.appId = "{{appId}}";
|
|
63
|
-
|
|
73
|
+
`;
|
|
64
74
|
}
|
package/package.json
CHANGED
package/preset.config.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rspack extends 专用配置文件
|
|
3
|
+
*
|
|
4
|
+
* 使用方式：
|
|
5
|
+
* ```javascript
|
|
6
|
+
* module.exports = {
|
|
7
|
+
* extends: '@lark-apaas/fullstack-rspack-preset/preset.config.js',
|
|
8
|
+
* entry: { ... },
|
|
9
|
+
* }
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const { createFullstackRspackConfig } = require('./lib/index');
|
|
14
|
+
|
|
15
|
+
// 直接导出配置对象（不是 exports.default）
|
|
16
|
+
module.exports = createFullstackRspackConfig();
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
|
|
3
|
-
const path = require('path');
|
|
4
|
-
function createReactRefreshPlugin() {
|
|
5
|
-
return new ReactRefreshPlugin({
|
|
6
|
-
overlay: {
|
|
7
|
-
module: path.resolve(__dirname, 'overlay/index.js'),
|
|
8
|
-
},
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
module.exports = createReactRefreshPlugin;
|