next-packify

Creates a zipped package bundle which gets un-bundled and mirrored in the install dir

Usage no npm install needed!

<script type="module">
  import nextPackify from 'https://cdn.skypack.dev/next-packify';
</script>

README

Next-Packify

Version Minimum npm version Minimum node version Code size Issues License: MIT Downloads Stars

An easy to use file bundler for next.js front-end component packages

Contents

Introduction

Next-Packify built by @elliotgibson for @content-dynamics

This project was created because I was tired of copying boiler plate next.js specific components to other projects, I wanted a simple and portable way of quick-loading components into other next.js projects. Typically you would use babel and webpack to pack React based components so that they can be imported into Next.js however I found that building and bundling components from npm is tedious and hinders development as it also removes the developer from the source code. What if instead of using the typical npm modules you could simply "copy/paste" modules directly from npm using npx?

The project aims to provide a bundler and installer through the project. The bundler creates a package.json, a compressed bundle and an installer from your source code using a configuration file (it will even automatically run npm publish for you!) - when installed the bundle will be decompressed into local files in the project you ran the installer in as @/!

Getting started

If all your source code is bundled inside ./src then simply run npx next-packify to run the bundler and create your installation package (ready for npm publish)

Alternatives: You can also install this package globally and run anywhere: npm install next-packify -g and then run nxp-build in the packages you want to build to create your installation package.

When installing the installation package there are two options, you can install it using npm npm install <package-name> -g and then run load-<package-name> in the directories you would like to install the package into or you can use npx to automatically install the package bundle npx <package-name> (run this inside the directory you would like to install to). Alternatively if you have installed many next-pack packages using npm into a project directory and you have next-pack installed globally you can use nxp-install to install all next-pack packages within a directory.

Configuration

The project has attempted to make configuration as simple as possible for the developer, the configuration file takes an array of "sources" which have properties controlling the behaviour of the bundler.

For example heres a configuration file for a single source:

conf.nexpack

{
    "sources":[
        {
            "path":"./src", 
            /*The path used to resolve your package files (think of this as the source path)*/
            "dest":"./", 
            /*The destination path for this source. Sources will always be installed as 
            @packagename/dirname where dest is relative to dirname*/
            "exclude":[] 
            /*A list of file extensions you want to exclude from the bundle, this can also be absolute filenames if you want to exclude complete paths. By mindful that this matches the ending of strings, so [ is ] will also match [ .is ] */
        }
    ]
}

Next pack also makes use of your package.json file and some custom properties before building the npm installable package - these are: nextscripts which will add any other scripts you would like to add to the package.json. nextpack which adds other dependencies needed by the installer / components and finally nextbin which adds any other additional bin script entries to your package.json. Note that your package dependencies on the route (the package where next-pack is installed) will be included as "peerDependencies" on your package.json file.

Upcomming features

We're working on a few future functionalities such as next-pack bundles which can be used to create "collections" of next-pack packages which can be easily loaded by simply loading the bundle rather than each individual next-pack. This update will include major changes to the bundler and client-side debundler allowing for far more granular control (at the expense of configuration complexity)

We also plan on implementing a global next-pack index (on your route) which we hope can be invoked by running 'nxp-global ' where packages can be loaded into global by running 'nxp-make-global' in the package folder ( if a .nxpack is detected it will mount this onto the global folder instead) which will build and then mount your package into the global folder. This feature will hopefully also be integrated with npm so that you can mount packages directly from npm by running nxp-mount-global .

If you're interested in the progress of these extra features or want to collaborate and shape the future of next-packify then view the open issues here...

faq

  1. Why?

    • I got annoyed with having to use babel and re-compiling components multiple times (especially where some compilers are compatible directly...)
    • I also wanted to make it really easy to share component & other code between next-js based apps (which is the primary function of and reasoning behind making this package);
  2. How?

    • The project first collects and references your files using the options provided in your configuration. It then reads the contents of your files, bundles them into a single file and compresses that file using gzip. It creates package.json and installation js files which handles the decompression of your .nexpack file into the target project.

Contributing

Contributions to the project are more than welcome! Please visit the contributions guide for more information. Feel free to check the issues page if you want to contribute to solving issues.

If you would like to request a new feature please follow the request guide: Request a new feature

Author

👨‍💻 Elliot Gibson

GitHub: @elliotgibson
Twitter: @egibson_glass
Instagram: @egibson_glass

License

Copyright 2021 Elliot Gibson. This project is licensed with the MIT license.