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 🙏

© 2024 – Pkg Stats / Ryan Hefner

keeler

v0.0.35

Published

keeler 是基于react.js的脚手架,可以一键生成react项目的环境。

Downloads

33

Readme

keeler

keeler 是一款脚手架程序,可以一键生成react项目的环境。

安装

你可以通过以下命令安装keeler

npm install keeler -g

初始化项目

执行如下命令:

1. 进入项目目录,执行

keeler -i

系统会在当前目录创建如下结构文件:

├── gulpfile.js                     // gulp的配置文件
├── webpack.config.js               // webpack的配置文件
├── src                             // 项目文件
│   ├── app                         // 项目程序目录(JSX)
│   │   └── demo
│   │       └── demo.entry.jsx
│   ├── page                        // 项目html入口文件
│   │   └── demo
│   │       └── demo.html
│   └── static                      // 项目静态资源
│       └── scss
│           └── demo
│               └── demo.entry.scss
└── package.json

2.开发

初始化之后,你需要通过 npm install 安装所需的依赖,然后可以通过以下命令进行开发

npm run dev

npm run build

2.1.1 npm run dev

该命令用于开发阶段,其会自动启动编译程序,对页面进行编译(在进行编译之前,keeler会通过 keeler -b 去生成入口文件配置, 详见 keeler -b 的说明)。

同时该命令会自动创建webserver,并在浏览器中打开。该页面会自动监听文件的修改,并随之自动刷新。

如果需要编辑指定的模块可以通过PAGE参数指定

如:

PAGE=demo,pagea npm run dev

PAGE=demo,pagea yarn dev

2.1.2 npm run build

该命令用于生产环境,会自动完成编译压缩等事物。

2.1.3 keeler -b

开发过程中,使用者不需要手动配置webpack的入口,keeler会自动去寻找雷士 *.entry.jsx以及 *.entry.scss 的文件,并自动生成配置文件。该过程通过 keeler -b 执行,默认已经写入到了npm run buildnpm run dev中,默认情况下用户可以不用去关心这个步骤。

keeler -b 命令执行时keeler会扫描目录下的所有 *.entry.jsx以及 *.entry.scss 文件,自动制作编译配置文件(keel.entry.webpack.config.json),这个文件会被webpack所引用。

2.1.4 keeler add NAME

添加一个名为NAME的页面

该命令执行完成之后,会自动的在项目的目录中新建

src/app/NAME/NAME.entry.jsx
src/app/page/NAME/NAME.html
src/app/page/static/scss/NAME/NAME.scss

并自动处理好依赖关系(HTML文件会自动引入js和css)