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

ibag

v1.0.4

Published

A visual, fast, and customizable front-end scaffolding.

Downloads

24

Readme

ibag

For full documentation, visit http://ibag.1heng.top/#/.

English 简体中文

Overview

ibag, is a visual, fast, and customizable front-end scaffolding!Currently React and Vue are supported.

Why ibag

For many front-end developers, after creating a React/Vue project, they need to introduce some other auxiliary libraries, such as ESlint, Mocha, and so on. After installing the dependencies, you also need to create some configuration files or write related scripts according to the corresponding documents. ibag integrates and automates the above processes. Developers can freely check the auxiliary library option on the visual web page according to their needs, and leave the rest to ibag!

Feature

  • Visualization: Has an independent Web UI interface and supports multiple languages.
  • Fast: Save a lot of developers the process of frequently installing dependencies and modifying the code.
  • Customizable: You can freely choose the dependent libraries you need in the configuration items.
  • Compatibility: Supports Mac OS and Windows.
  • Multifunctional: Support UI framework, route, state management tools, unit testing frameworks, end-to-end testing frameworks, code formatting tools, etc.

Show

Installation

Install global dependencies

ibag needs gatsby to run the web page, concurrently can show the current running process more clearly.

npm i concurrently gatsby -g

Install ibag

npm i ibag -g

If the installation is successful, you can use the command ibag -h to see the help message.

Run ibag

Congratulations on the completion of the installation! Start using ibag now!

Executing the following command will pop up a web page, and then follow the guide step by step to build your initial project!

cd my-project
ibag init

When the "Start Build" button is clicked, an directory named output will be output in the execution directory of the terminal.

Congratulate! You have got your customized initialization project! Then press Ctrl+C or Command+C twice to exit the current two processes.

If the webpage does not pop up, please manually copy the URL from the terminal to the browser. Some commands will be intercepted by some security software. If a relevant prompt pops up, please allow execution.

!> If you need to run ibag init repeatedly, please delete the current output directory as much as possible to ensure the normal execution of ibag to the greatest extent. The author believes that deleting this "dangerous" operation should not be executed by a script program to prevent irreparable losses.

Start the project you built

react

cd output
npm i
npm run start

vue

cd output
npm i
npm run serve

You can also find other script execution methods in package.json. For example, if you choose eslint, there will be a code formatting command lint in the script property.

License

MIT