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

@sixa/wp-scripts

v1.0.0

Published

Collection of reusable scripts for WordPress development.

Downloads

5

Readme

Sixa WP Scripts


A small NPM module and CLI to prepare and bundle WordPress plugins into ZIP archives for easy distribution and installation.

Installation

npm i @sixa/wp-scripts --save-dev

Usage

Configure .bundleignore

Create and configure a .bundleignore in your project file to exclude files and directories from being packaged into the ZIP archive. Conceptually, .bundleignore is very similar to .gitignore and .npmignore and - essentially - works the same.

Example .bundleignore

.bundleignore
.git
.DS_Store
.editorconfig
.gitattributes
.gitignore
.husky
.idea
.prettierrc.js
.stylelintignore
.stylelintrc.js
composer.json
composer.lock
docs
node_modules
package.json
package-lock.json
phpcs.xml.dist
renovate.json
/src
*.zip

Typical Entries

Simple File Name or Path

Example:

.idea

Use a simple file name or path to exclude a specific file or directory in the project root and any subdirectory.

Wildcard + Extension

Example:

*.zip

Use a wildcard + extension to exclude any type of file in the project root and any subdirectory.

Root Folder

Example:

/src

Use a root file name or path to exclude any specific file or directory only from the project root. For instance, /src matches ./src but not ./vendor/company/package/src.

Notice

If no .bundleignore is available, @sixa/wp-scripts automatically finds and uses the .npmignore file. If no .npmignore file is present, .gitignore is used instead. If none of these files are present, no files are ignored.

Configure NPM Scripts

Add the following NPM script to your package.json:

{
  "scripts": {
    "bundle": "sixa-wp-scripts bundle NAME-OF-ARCHIVE"
  }
}

and replace NAME-OF-ARCHIVE with the name of your archive without the .zip extension.

Running sixa-wp-scripts bundle NAME-OF-ARCHIVE traverses the package directory and creates a file NAME-OF-ARCHIVE.zip including every file in the package directory without the files and directories in .bundleignore.

Preparation

Unless ignored via .bundleignore, sixa-wp-scripts bundle copies the directories node_modules and vendor into the archive. In many cases, this is the desired behaviour. However, in most cases, your local development environment will include development and peer dependencies that you do not intend to distribute in the plugin archive.

Thus, it is crucial that the bundling is prepared. Preparing the bundling process means that we eliminate all non-production dependencies from library directories. This can easily be achieved by adding an NPM script to package.json that performs the necessary steps.

The following prepare-bundle script can be used as the default script for blocks and extensions:

{
  "scripts": {
    "prepare-bundle": "npm i && npm run build && composer install --no-dev --optimize-autoloader"
  }
}

This prepare-bundle script performs the following operations:

  1. Install NPM dependencies (just in case we haven't yet)
  2. Build all assets
  3. Reinstall composer with only production dependencies and optimize the autoloader

For blocks and extensions, rather than deleting node_modules after npm run build, we ignore node_modules in .bundleignore. Luckily, composer install --no-dev already removes all non-production dependencies from vendor and we do not need to clean up after composer. The flag --optimize-autoloader converts PSR-4 and PSR-0 rules into classmap rules, which is faster (but inconvenient during development).