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

create-parcel-static

v1.0.2

Published

Project builder for creating static sites based Parcel

Downloads

5

Readme

📦 create-parcel-static

Project builder for creating static sites based Parcel v.2 creates a development environment and offers choices between HTML, Pug, EJS, CSS, SCSS, Sass, Less, Tailwind, JavaScript, TypeScript, jQuery(Ts), and integration with Prettier, ESLint, Stylelint.

Motivation

For those who appreciate simplicity. In the world of modern web development, it has become commonplace to use powerful frameworks, but sometimes you need something more classic and simple. This builder provides an easy and efficient way to deploy a development environment to build lightweight, fast and simple static sites without relying on heavyweight tools.

Usage:

You can use your preferred package manager - npm, yarn, pnpm, bun, ...

npm create parcel-static

Then answer the constructor's questions and follow instructions in your terminal.

Features

  • Project Name: Assign a name to your project.
  • Template Engine: Choose your preferred template engine (HTML, Pug, EJS).
  • Style Processor: Select a styling tool (CSS, SASS - Indented Syntax, SASS - SCSS Syntax, Less, Stylus, Tailwind).
  • JavaScript Framework: Pick a JavaScript framework or library (JavaScript, TypeScript, JQuery, JQuery with TypeScript).
  • Prettier: Integrate Prettier for code formatting (optional).
  • StyleLint: Incorporate StyleLint for style standardization (optional).
  • ESLint: Include ESLint for JavaScript standard compliance (optional).

Command line

You can use the command line to easily create projects.

# Warning: npm requires a double dash before specifying options
$ npm create parcel-static [project-name] -- [options]
$ yarn create parcel-static [project-name] [options]
$ pnpm create parcel-static [project-name] [options]
$ bun create parcel-static [project-name] [options]

Arguments:

[project-name]  Name of the project/project directory (optional)

Options:

--markup       Choose template engine: 'html' | 'pug' | 'ejs'
--style        Choose style processing tool: 'css' | 'scss' | 'sass' | 'stylus' | 'less' | 'tailwind'
--script       Choose JavaScript tool: 'javascript' | 'typescript' | 'jquery' | 'jqueryts'
--eslint       Add ESLint
--stylelint    Add Stylelint
--prettier     Add Prettier
--no-eslint    Exclude ESLint (works similarly with Stylelint and Prettier)
--help, --h    Display help message

Examples:

$ npm create parcel-static
$ npm create parcel-static my-static-project
$ npm create parcel-static my-static-project -- --markup pug --style tailwind
$ npm create parcel-static -- --markup pug --style tailwind --no-prettier
$ yarn create parcel-static --script typescript --eslint --prettier
$ yarn create parcel-static my-static-project --markup html --style scss
$ yarn create parcel-static --markup html --style scss
$ yarn create parcel-static --eslint --prettier

Project Structure

.
├── src                                   # Source files
│   ├── assets                            # Project resources (favicons, etc.)
│   ├── images                            # Image files
│   ├── scripts                           # Script files
|   |   └── main.[js,ts]                  # Main script file
│   ├── styles                            # Style files
|   |   └── main.[css,scss,sass,styl]     # Main style file    
│   └── index.[html,pug,ejs]              # Main markup file
├── public                                # Public files that will be builded as is, without processing
│   └── robot.txt                         # Instructions for search engine robots
├── .postcssrc                            # PostCSS config (optional)
├── .prettierrc                           # Prettier config (optional)
├── .stylelintrc                          # StyleLint config (optional)
├── tailwind.config.ts                    # Tailwind config (optional)    
├── tsconfig.json                         # TypeScript config (optional)    
├── dist                                  # Compiled files
└── ...

Startup scripts

Scripts are run depending on the package manager used - npm start [script], yarn [script], etc.

  • start - Starting the development server
  • build - Building the project
  • clear:dist - Cleaning the build directory

Optional scripts depending on project configuration:

  • lint:scripts:check - Check scripts with ESLint
  • lint:scripts:fix - Fix scripts issues with ESLint
  • lint:styles:check - Check styles with StyleLint
  • lint:styles:fix - Fix styles issues with StyleLint
  • prettier:markup:check - Check markup files formatting with Prettier
  • prettier:markup:fix - Fix markup files formatting with Prettier
  • prettier:scripts:check - Check script files formatting with Prettier
  • prettier:scripts:fix - Fix script-files formatting with Prettier
  • prettier:styles:check - Check style files formatting with Prettier
  • prettier:styles:fix - Fix style-files formatting with Prettier

References

For more information about the Parcel bundler, visit its repository.