webc.com 0.1.23 → 0.1.24
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.md +59 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,7 +12,65 @@
|
|
|
12
12
|
|
|
13
13
|
点击组件右上角的『在线调试』可以调试无打包的组件。
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## 使用
|
|
16
|
+
|
|
17
|
+
### 1. CDN 直接引用 (无需打包)
|
|
18
|
+
|
|
19
|
+
对于无需打包、直接在浏览器中引用的使用场景，你可以通过 CDN 直接引用 JS 与 CSS 文件。
|
|
20
|
+
|
|
21
|
+
以 `Scroll` 组件（虚拟滚动条）为例：
|
|
22
|
+
|
|
23
|
+
#### 使用 jsdelivr:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<link href="//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.css" rel="stylesheet" />
|
|
27
|
+
<script type="module">
|
|
28
|
+
import "//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.js";
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
#### 使用 淘宝镜像 npmmirror（对中国大陆线路友好）:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<link href="//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.css" rel="stylesheet" />
|
|
36
|
+
<script type="module">
|
|
37
|
+
import "//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.js";
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
### 2. 按需添加至本地项目 (用于构建打包)
|
|
44
|
+
|
|
45
|
+
项目支持类似于 [shadcn](https://ui.shadcn.com) 的按需添加组件机制。如果你使用构建工具，可在你的项目中直接运行以下命令将组件下载并添加至本地：
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
bunx webc.add <组件名>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
例如添加 `Scroll` 组件（虚拟滚动条）：
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
bunx webc.add Scroll
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**命令行实现机制：**
|
|
58
|
+
|
|
59
|
+
- 运行该命令时，它会向 npm 注册表查询并解析 `webc.com` 对应的包源。
|
|
60
|
+
- 自动下载包源文件并提取对应的组件源码，将其按需编译并输出到本地项目中对应的 `lib/组件名` 目录下，且会把组件相关的 Stylus 自动编译成 CSS 放入公共样式中。
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### 3. 配合 `vite-plugin-svg-var` 优化 SVG 资源
|
|
65
|
+
|
|
66
|
+
为了优化打包体积并大幅减少网络请求，建议在 Vite 构建器中配合使用 [vite-plugin-svg-var](https://www.npmjs.com/package/vite-plugin-svg-var) 插件。
|
|
67
|
+
|
|
68
|
+
#### 插件的用途与核心特性：
|
|
69
|
+
|
|
70
|
+
- **智能去重**：自动对 `public/svg` 下的所有 SVG 内容进行 MD5 哈希计算。即使不同路径或文件名对应同一个 SVG 内容，也只会在 CSS 中生成单一变量，所有引用都将映射到该变量，避免冗余打包。
|
|
71
|
+
- **UTF-8 安全编码**：将 SVG 直接转换为更轻量、体积更小的 UTF-8 编码 `data:image/svg+xml` URL 写入 CSS 变量，比传统的 Base64 编码方式体积更小、压缩率更高。
|
|
72
|
+
- **自动注入与替换**：在构建或运行开发服务器时，它会自动在项目入口 JS（如匹配 `/page/entry/**/*.js`）中注入虚拟的 CSS 变量样式，并将 CSS/Stylus/Svelte 中原本引用的 `url("/svg/xxx.svg")` 自动替换为 CSS 变量形式（如 `var(--xxxSvg)`）。这意味着所有 SVG 将被直接内联合并在 CSS 中，页面加载时无需发起任何多余的 SVG 图片 HTTP 请求。
|
|
73
|
+
- **开发阶段热更新 (HMR)**：自动监听 `public/svg` 文件夹，当新增、删除或修改 SVG 文件时，插件会自动重新扫描并生成 CSS 变量，且触发模块热重载，方便高效调试。
|
|
16
74
|
|
|
17
75
|
## 初衷
|
|
18
76
|
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"webc.com","version":"0.1.
|
|
1
|
+
{"name":"webc.com","version":"0.1.24","description":"","keywords":[],"homepage":"https://webc-zh.github.io","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-zh/webc-zh.github.io.git"},"bin":{"webc-i":"./cli.js"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"dependencies":{"@3-/read":"^0.1.4","ansis":"^4.3.0","stylus":"^0.64.0","tar":"^7.5.15","yargs":"^18.0.0"},"devDependencies":{}}
|