@asd14/vblocks

中文文档

6.2.0发布于 2026/10/29MITTypeScriptES Module构建来源已验证近 30 天下载 1920

零配置 React 构建, 作为静态站点或单一的 HTML 文件

文档目录15 节

目录
快速启动
一个项目中的几个应用程序
词汇
怎么样
使用环境变量
停止使用 ../../../ 到处都是
使用 CSS 模块
替换默认配置
有尾风的样式
在现有工程中添加 VBlocks
参考资料
图标
模板
许可证

@asd14/vblocks (英语)

零配置 React 构建, 作为静态站点或单一的 HTML 文件

零配置
仅需要 src/index.tsx 财务报告和审定财务报表 src/index.html

🔋 最大支持
SWC, PostCSS, CSS 模块, MDX, 反应刷新, 多腾夫

几个应用,一个安装
Apps 共享一个 package.json 财务报告和审定财务报表 node_modules/。一个新的应用程序重新使用已安装的软件包

为AI代理优化
代理上下文只持有应用程序 : 没有 Webpack, PostCSS 或 TypeScript 配置写入、读取或修正

[大
VBlocks 需要节点 ^22.22.3, (中文(简体) ), ^24.15.0 或者说 >=26.0。。。 .

快速启动

脚手架最小反应项目

npx @asd14/vblocks init my-vblocks-app
cd my-vblocks-app
npm install

my-vblocks-app/
 ├─ src/
 │    ├─ index.tsx
 │    ├─ index.html
 │    └─ index.css
 ├─ .gitignore
 ├─ tsconfig.json
 └─ package.json      # react, react-dom and the vblocks scripts

启动开发服务器
```
npx vblocks serve
```

构建

npx vblocks build               # production bundle in dist/
npx vblocks build --single-file # one dist/index.html, every asset inlined

一个项目中的几个应用程序

多个应用程序,如演示或MVP草图,可以共享一个 package.json 和一个 node_modules/数字 :

增加水管

npx @asd14/vblocks init sketches --only plumbing

sketches/
 ├─ .gitignore
 └─ package.json

添加应用程序

npx @asd14/vblocks init sketches/flow-diagram --template xyflow --only app
cd sketches
npm install

 sketches/
+ ├─ flow-diagram/
+ │   ├─ src/          # the files of the xyflow template
+ │   ├─ postcss.config.js
+ │   └─ tsconfig.json
  ├─ .gitignore
! └─ package.json      # + @xyflow/react, tailwindcss, @tailwindcss/postcss, cssnano

启动一个应用程序的开发服务器
```
npx vblocks serve --prefix flow-diagram
```

词汇

任期	手段
接线	项目文件 `init` 写道: `package.json`, (中文(简体) ), `.gitignore`
项目文件夹	文件夹与 `package.json`
App 文件夹	文件夹与 `src/index.tsx` 财务报告和审定财务报表 `src/index.html`
套装	文件 `build` 写到 `dist/`

怎么样

使用环境变量

添加一个 .env 文件到您的应用程序文件夹
```
API_URL=https://api.example.com
```
读取代码中的变量
```
const apiUrl = process.env["API_URL"]
```

网页包替换每个 process.env["NAME"] 值为 NAME,以及 undefined 何时 .env 不设置它。 Webpack 树叶出捆绑变量代码不读取.

[尖叫声]
从不泄露秘密,例如API密钥,通过 process.env任何装载者页面可以读取.

[注]
这个客户类型声明 process.env 没有别的了从节点, 因为Webpack 取代了其他的.

停止使用 `../../../` 到处都是

VBlocks 解析 @self 页:1 src/ 您的应用程序文件夹 :

// Instead of: import { Component } from "../../../components"
import { Component } from "@self/components"

[注]
VBlocks用 SWC 编译类型脚本,不进行打字检查. 运行 tsc 你自己来  tsconfig.json 需要和 Webpack 相同的别名.
这个 tsconfig.json 那个 vblocks init 已写这个否则,添加:
 {
   "compilerOptions": {
+    "paths": { "@self/*": ["./src/*"] }
   }
 }

使用 CSS 模块

文件名称 *.module.css

/* src/button.module.css */
.primary-button {
  color: tomato;
}

作为对象导入

/* src/button.tsx */
import styles from "./button.module.css"

export const Button = () => <button className={styles.primaryButton} />

骆驼Case 键 - 说吧 .primary-button 变成 styles.primaryButton
类名 - 一个赤裸的大麻花 production 模式, [local]__[hash] 内 development 模式

[注]
这个客户类型声明 .css,图像和字体导入.

替换默认配置

您的应用程序文件夹中的每个配置都会替换同名的默认值 :

webpack.config.js
postcss.config.js
- postcss-preset-env编织出巢穴, oklch() 财务报告和审定财务报表 color-mix() 用于旧浏览器并添加销售商前缀
- cssnano 内 production
.swcrc
- 浏览器目标 > 0.25%, not dead

弹出默认位于您的应用程序文件夹中

cd flow-diagram
npx vblocks eject swc > .swcrc

更新弹出的文件

[注]
VBlocks 不将您的配置与默认合并, 除了两个例外 :

.swcrc -> env.targets: VBlocks 在缺少您的默认值时添加默认值

.swcrc -> jsc.transform.react.refresh: VBlocks 添加反应刷新当 serve 运行在 development 模式

有尾风的样式

VBlocks不包括"泰尔风". 通过一个加法 postcss.config.js 在你身边应用程序文件夹 :

[注]
这个 xyflow 财务报告和审定财务报表 xyflow-tabs 模板 vblocks init 有这个设置.

安装 Tailwind、 PostCSS 和 cssnano 的 Tailwind 插件, 其名称为已弹出配置导入
```
npm install --save-dev tailwindcss @tailwindcss/postcss cssnano
```
弹出默认 PostCSS 配置到您的应用文件夹
```
npx vblocks eject postcss > postcss.config.js
```

替换 postcss-preset-env 带有 Tailwind 插件

+import tailwindcss from "@tailwindcss/postcss"
 import cssnano from "cssnano"
-import postcssPresetEnv from "postcss-preset-env"

 export default ({ mode }) => ({
   plugins: [
-    postcssPresetEnv({ stage: 2 }),
+    tailwindcss({ optimize: mode === "production" }),
     ...(mode === "production" ? [cssnano({ preset: "default" })] : []),
   ],
 })

[大
尾风 4 编译并添加销售商前缀自己来两个插件, postcss-preset-env 重写 Tailwind的 @layer 规则进入 :not(#\#) 选择者。 CSS文件增长.

添加尾风导入到 src/index.css
```
@import "tailwindcss" source(".");
```
source(".") 将 Tailwind 的类扫描限制在 CSS 文件的文件夹中, src/。。。 .

[注]
无 source("."),尾风扫描当前文件夹。与 --prefix,您从工程文件夹中运行 VBlocks,该文件夹持有每个应用程序。每个应用程序的CSS,然后也获得其他应用程序的类.

在现有工程中添加 VBlocks

安装 VBlocks

npm install --save-dev @asd14/vblocks    # needs react and react-dom ^18 or ^19

添加数据客户类型编辑 @self 您的别名 tsconfig.json

 {
   "compilerOptions": {
+    "types": ["@asd14/vblocks/client"],
+    "paths": { "@self/*": ["./src/*"] }
   }
 }

保证 index.tsx 财务报告和审定财务报表 index.html 包含 src/

[注]
VBlocks 构建 dist/index.html 从 src/index.html 并添加脚本和样式表标签。放下装入您的条目的标签, 如 Vite's <script type="module" src="/src/main.tsx"></script>。。。 .

启动开发服务器
```
npx vblocks serve
```

参考资料

图标

每个命令都会打印自己的帮助 --help,比如说. npx vblocks serve --help。。。 .

`vblocks init`

将模板的管道、应用或两者都写入 <directory>。。。 .

vblocks init <directory>
  [--template <plain|xyflow|xyflow-tabs>]
  [--only <app|plumbing>]

<directory>
- 要写入的文件夹。一定是不见了还是空的
--template (默认 : plain(中文(简体) )
- 要写入的模板见模板
--only (默认:两者兼有)
- 写入模板的一部份
- plumbing数字 : package.json, (中文(简体) ), .gitignore
- app数字 : src/, (中文(简体) ), tsconfig.json 和模板的配置. init 添加模板对 package.json 会议日程和议程项目文件夹时 <directory>没有 package.json 那边, init 失败

`vblocks serve`

启动开发服务器 .

运行于 http://localhost:8080,或下一个自由端口
听着 localhost,所以你网络上的另一个设备,例如电话,不能打开页面
打开浏览器中的页面

vblocks serve
  [--mode <development|production>]
  [--prefix <directory>]
  [--analyze]
  [--log-level <error|warn|info|verbose>]
  [-- <webpack option>...]

--mode (默认 : development(中文(简体) )
- Webpack 模式
- 反应刷新仅在其中运行 development
--prefix (默认: 当前文件夹)
- 这个应用程序文件夹,必须存在
--analyze
- 在自由端口运行捆绑分析器
--log-level (默认 : warn(中文(简体) )
- Webpack 及其开发服务器打印多少
-- <webpack option>...
- 任意 webpack serve 选项
- serve 每一个都转到 Webpack 不变
- 举个例子. -- --host 0.0.0.0在网络上听

`vblocks build`

将应用程序建为捆绑在 dist/ 应用程序文件夹.

默认, build数字 :

撰写 JS 和 CSS 的有内容隐藏名称的文件
写入 a react 块和 a vendors 其它依赖关系时的块总计20个KB(10个KB)以上 development(中文(简体) )
内插 jpg, (中文(简体) ), gif, (中文(简体) ), png 财务报告和审定财务报表 svg 不超过 10 KB 的文件
写入更大的图像到 dist/ 含有包含内容的名称
写作 woff, (中文(简体) ), woff2, (中文(简体) ), ttf 财务报告和审定财务报表 eot 文件为 dist/fonts/
副本 src/public/favicon.svg 财务报告和审定财务报表 src/public/robots.txt 您的应用程序,或默认 VBlocks

vblocks build
  [--mode <development|production>]
  [--prefix <directory>]
  [--single-file|--single]
  [--log-level <error|warn|info|verbose>]
  [-- <webpack option>...]

--mode (默认 : production(中文(简体) )
- Webpack 模式
- 单位 production, (中文(简体) ), build 修改JS、HTML和默认的PostCSS 配置, CSS
--prefix (默认: 当前文件夹)
- 这个应用程序文件夹,必须存在
--single-file|--single
- 单独写一个 dist/index.html,每个资产
- 浏览器从磁盘打开文件, 没有服务器和网络
- 捆绑没有 robots.txt
- 在 URL 散列中保留路径
  - 打开 file://, (中文(简体) ), history.pushState 向其它路径投掷
--log-level (默认 : warn(中文(简体) )
- 网包印数
-- <webpack option>...
- 任意 webpack build 选项
- build 每一个都转到 Webpack 不变
- 举个例子. -- --devtool source-map,用于写入源地图

`vblocks eject`

打印默认配置到 stdout .

vblocks eject <webpack|postcss|swc>

<webpack|postcss|swc>
- 要打印的配置

在您的应用程序文件夹中运行并保存输出到替换默认数字 :

npx vblocks eject webpack > webpack.config.js
npx vblocks eject postcss > postcss.config.js
npx vblocks eject swc > .swcrc

一个被弹出配置从您的工程中加载其插件和加载器。安装它们在项目文件夹中, eg. postcss-preset-env 财务报告和审定财务报表 cssnano 邮政编码相会.

模板

所有模板脚手架 src/index.html, (中文(简体) ), src/index.css 财务报告和审定财务报表 tsconfig.json。。。 .

`plain`

"Hello World!" 进入 src/index.tsx。。。 .

不添加软件包

`xyflow`

一个图,和一个选定节点或边缘的细节面板.

添加数 @xyflow/react, (中文(简体) ), tailwindcss, (中文(简体) ), @tailwindcss/postcss 财务报告和审定财务报表 cssnano 改为页:1 package.json 项目文件夹
写入 a postcss.config.js 配置尾风

src/
├── index.tsx           # the layout: header, diagram, details panel, the selected id
├── diagram.tsx         # the nodes and edges, placed and sized in grid cells
├── details.tsx         # the panel for the selected node or edge
└── utils/grid.ts       # CELL_SIZE and toPixels

`xyflow-tabs`

每个图一个分页,每个分页都有自己的细节面板.

添加相同的软件包和 postcss.config.js 作为 xyflow

src/
├── index.tsx              # the layout: header, tab bar, details panel, the selected id
├── pages/
│   ├── build/
│   │   ├── diagram.tsx    # the nodes and edges of one tab, in grid cells
│   │   └── details.tsx    # the panel for its selected node or edge
│   └── serve/             # the same two files
├── ui/zoom-level.tsx      # the zoom level, and a Reset to 100%
└── utils/grid.ts          # CELL_SIZE and toPixels

许可证

麻省理工学院

版本与发布记录

@asd14/vblocks 共发布 14 个版本，首次发布于 2025/09/18；过去 12 个月发布了 13 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`6.2.0`latest	2026/10/29	10 天前
`6.1.0`	2026/10/23	16 天前
`6.0.0`	2026/10/20	19 天前
`5.4.0`	2026/10/17	22 天前
`5.3.0`	2026/10/17	22 天前
`5.2.0`	2026/10/17	22 天前

关于 @asd14/vblocks 的常见问题

@asd14/vblocks 是什么？

零配置 React 构建, 作为静态站点或单一的 HTML 文件

如何安装 @asd14/vblocks？

在项目目录运行 npm install @asd14/vblocks，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18 || ^19）、react-dom（^18 || ^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 vblocks，可以用 npx vblocks 直接运行。

@asd14/vblocks 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@asd14/vblocks 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。

@asd14/vblocks 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js ^22.22.3 || ^24.15.0 || >=26.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@asd14/vblocks 可以商用吗？

@asd14/vblocks 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@asd14/vblocks 的下载量有多少？

根据 npm 官方下载统计，@asd14/vblocks 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,920 次，日均约 64 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@asd14/vblocks 还在维护吗？

最新版本 6.2.0 发布于 2026/10/29（10 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 13 个；首次发布于 2025/09/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @asd14/vblocks

pnpmpnpm add @asd14/vblocks
yarnyarn add @asd14/vblocks
bunbun add @asd14/vblocks

peer 依赖react ^18 || ^19react-dom ^18 || ^19

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

命令行npx vblocks

在你的项目目录中运行此命令。

近 30 天下载

1,920

约 1920 次日均 64 次

统计周期 2026/10/07 – 2026/11/05
数据来自 npm 官方下载统计，1 天前更新

最新版本6.2.0发布于 10 天前

开源许可MIT宽松许可

包体积125 kB42 个文件 · 解压后

运行依赖20 个另有 2 个 peer 依赖

模块格式ES Module无副作用，可 tree-shake

TypeScript自带类型

Node.js^22.22.3 || ^24.15.0 || >=26.0

发布版本14 个近 12 个月 13 个

首次发布2025/09/181.1 年前

元数据更新2026/10/29

每一个软件包背后，
都有分享与创造的人。

@asd14/vblocks

@asd14/vblocks (英语)

目录

快速启动

一个项目中的几个应用程序

词汇

怎么样

使用环境变量

停止使用 ../../../ 到处都是

使用 CSS 模块

替换默认配置

有尾风的样式

在现有工程中添加 VBlocks

参考资料

图标

vblocks init

vblocks serve

vblocks build

vblocks eject

模板

plain

xyflow

xyflow-tabs

许可证

版本与发布记录

关于 @asd14/vblocks 的常见问题

@asd14/vblocks 是什么？

如何安装 @asd14/vblocks？

@asd14/vblocks 支持 TypeScript 吗？

@asd14/vblocks 支持 ESM 还是 CommonJS？

@asd14/vblocks 需要什么版本的 Node.js？

@asd14/vblocks 可以商用吗？

@asd14/vblocks 的下载量有多少？

@asd14/vblocks 还在维护吗？

停止使用 `../../../` 到处都是

`vblocks init`

`vblocks serve`

`vblocks build`

`vblocks eject`

`plain`

`xyflow`

`xyflow-tabs`