create-wcs

快速创建基于 Web Components 的模块化项目脚手架工具，遵循 HTML Template、Custom Elements、Shadow DOM 和 ES Modules 四大核心技术规范。

特性

• 🚀 一键生成完整的 Web Components 开发环境
• 🔧 模块化设计：将组件逻辑、模板和样式分离为独立文件
• 📦 内置构建工具配置（Rollup + TypeScript）
• 🔄 开发环境支持热重载
• 📝 遵循 Web Components 标准规范
• 🎨 样式隔离（Shadow DOM 特性）
• 📱 响应式设计支持

快速开始

使用 npm init 直接创建项目： npm init wcs my-web-components cd my-web-components npm start 或者使用 npx： npx create-wcs my-web-components cd my-web-components npm start

使用方法

创建项目

创建默认名称的项目

npm init wcs

创建指定名称的项目

npm init wcs 运行上述命令后，工具会引导你完成项目创建过程，包括设置版本号和选择是否立即安装依赖。

开发模式

npm start 启动开发服务器，默认地址为 http://localhost:8080，支持热重载，修改代码后会自动刷新页面。

构建生产版本

npm run build 将项目打包为生产就绪的代码，输出到 dist 目录。

运行测试

npm test 执行测试用例（项目模板中包含基础的测试配置）。

代码检查

npm run lint 使用 ESLint 检查代码规范。

项目结构

创建的项目结构如下： my-web-components/ ├── src/ │ ├── components/ │ │ └── my-element/ # 示例组件 │ │ ├── my-element.ts # 组件逻辑（Custom Element 定义） │ │ ├── my-element.html # 组件模板（HTML Template） │ │ └── my-element.css # 组件样式（Shadow DOM 样式） │ ├── index.ts # 入口文件，导出组件 │ └── main.ts # 主程序，注册组件并初始化 ├── public/ │ └── index.html # 示例页面 ├── rollup.config.js # Rollup 配置 ├── tsconfig.json # TypeScript 配置 ├── package.json # 项目依赖和脚本 └── README.md # 项目说明

组件模块化设计

项目采用模块化设计理念，将 Web Components 拆分为三个独立文件：

1. 逻辑文件（.ts）：定义自定义元素类，处理生命周期、属性和事件
2. 模板文件（.html）：组件的 HTML 结构，使用 <template> 标签
3. 样式文件（.css）：组件的样式表，仅作用于组件内部（Shadow DOM）

这种设计使代码更易于维护和扩展，适合大型项目和组件库开发。

示例组件

创建的项目中包含一个 my-element 示例组件，展示了 Web Components 的核心特性：

• 自定义属性（name、count、disabled）
• 事件派发（count-changed）
• 插槽使用（<slot name="content">）
• 生命周期方法
• 响应式更新

许可证

MIT