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

generator-flash

v0.1.1

Published

react dev prod and so on

Downloads

7

Readme

generator-flash

目前仅支持react + react-router + redux + webpack 后续会支持vue等

该脚手架可创建 项目 工程,也可创建 组件 工程

运行环境

  • node 6.x 以上版本
  • Mac OSX & Windows

安装方法

  • npm install -g yo generator-flash

使用方法

  • 任意目录 或者 项目目录 yo flash

  • 选择 创建项目 or 组件 (目前仅支持react 后续会支持vue等)
  • 依次输入 或 回车填选 项目所需关键字

  • 项目自动生成 目录结构如下

.
├── README.md
├── build
│   ├── favicon.ico
│   ├── index.html
│   └── static
│       ├── css
│       ├── js
│       └── media
├── config
│   ├── cdnPath.js
│   ├── filenames.js
│   └── polyfills.js
├── mock
│   ├── README.md
│   ├── config.js
│   └── db
│       ├── delay.json
│       └── test.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api
    │   ├── index.js
    │   ├── serverGet.js
    │   └── serverPost.js
    ├── components_common
    │   └── FooterBar
    │       ├── index.js
    │       └── index.scss
    ├── pages
    │   └── index
    │       ├── actions
    │       ├── components
    │       │   ├── HomeLogo
    │       │   └── ListItem
    │       ├── containers
    │       │   ├── App.js
    │       │   ├── Home
    │       │   ├── My
    │       │   └── Site
    │       ├── index.js
    │       ├── reducers
    │       └── store
    ├── scss_mixin
    │   ├── build
    │   │   └── reset.min.css
    │   └── scss
    │       └── _mixins.scss
    └── tools
        ├── utils
        └── polyfill
       

结构释意

  • src 业务代码
    • api 请求
    • components_common 业务公用代码片段
    • pages/* 页面
    • scss_mixin 快捷的布局mixin方法语法糖
    • tools
      • utils 语法糖
      • polyfill 自定义补丁包
  • config/cdnPath cdn配置
  • public/*.html 项目html页 (默认单页应用为index.html )
  • mock/config mock数据

安装依赖

  • npm install

项目运行

  • npm run start
  • npm run build

支持创建工程种类(目前只支持react的4种)

  • 项目 react + react-router
  • 项目 react + react-router + redux
  • 无状态组件 reactSFC
  • 有状态组件 reactComponent

隐藏功能get😉

  • mock数据功能 可以提供给你更好的前后端分离力能 (mock数据服务器地址配置默认在 package.json 中 proxy)
  • 新增页面 只需要在/src/pages/ 下新建和index平级的目录 并且/public/ 下新建同名的 html 页面即可,无需多余配置
  • 天然的支持 antd && antd-mobile 无需多余的配置
  • 内置scss_mixin 和 utils 语法糖,甜的你不要不要的 (自行查看代码探索哈)

黑科技get😉

  • 目录结构树的生成:建议使用tree (npm install -g tree-cli

划重点!!!划重点!!! 模板工程 已经为你搞定了一切,你可以立即运行 看效果,唯一要干的事情就是写业务代码

issue