npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

create-forward-widget

v2.1.0

Published

> 快速创建 Forward Widget 项目的脚手架工具

Readme

Create Forward Widget

快速创建 Forward Widget 项目的脚手架工具

NPM Version NPM License

🚀 简介

create-forward-widget 是一个用于快速创建 Forward Widget 项目的脚手架工具。它提供了开箱即用的项目模板,包含完整的开发环境配置和类型定义,让你可以专注于 Widget 逻辑的实现。

📦 安装与使用

创建新项目

npm create forward-widget@latest
# 或
yarn create forward-widget
# 或
pnpm create forward-widget@latest

交互式创建

运行命令后,脚手架会引导你完成以下步骤:

  1. 输入项目名称:指定项目名称或路径
  2. 选择语言:支持 TypeScript 和 JavaScript
  3. 自动生成项目:创建完整的项目结构和配置文件

项目初始化

创建项目后,按照提示完成初始化:

cd your-project-name
git init  # 可选
npm install
npm run dev

📁 项目结构

生成的项目包含以下文件结构:

your-project-name/
├── src/
│   ├── forward-widget-env.d.ts    # 类型定义文件
│   └── index.ts                   # 主要逻辑文件
├── dist/                          # 构建输出目录
├── package.json                   # 项目配置
├── rslib.config.ts               # 构建配置
└── tsconfig.json                 # TypeScript 配置(TS 项目)

🛠️ 开发流程

开发模式

npm run dev

启动开发模式,支持文件监听和热重载。

构建项目

npm run build

构建生产环境的 Widget 包。

🎯 使用脚手架编写组件的优势

  • [x] 完整的类型推断:提供完整的 TypeScript 类型定义,包括 Widget API、环境变量等
  • [x] 方便引入部分兼容的外部依赖:预配置的构建工具支持现代 JavaScript 特性
  • [x] 开箱即用的开发环境:预配置 Rslib 构建工具,无需额外配置
  • [x] 标准化的项目结构:统一的项目结构,便于维护和协作
  • [x] 热重载支持:开发模式下支持文件监听和自动重新构建
  • [x] 多语言支持:同时支持 TypeScript 和 JavaScript 模板
  • [x] 现代化构建工具:基于 Rslib 的高性能构建配置
  • [x] 环境变量管理:内置环境变量类型定义和管理
  • [x] 测试支持:集成测试工具和模拟环境

📚 相关文档

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改善这个项目。

📄 许可证

MIT License