Author: Ram Jam
GitHub: https://github.com/ramjam97/simple-js-lib-builder
Version: 1.0.0
A lightweight and reusable Node.js project template for building JavaScript libraries.
It automatically generates distributable files (index.js
, index.min.js
, and documentation) and manages version folders based on your package.json configuration.
- π οΈ Simple structure for developing vanilla JS libraries
- β‘ Auto-builds and minifies your library using Terser
- π§Ύ Auto-generates banner metadata (name, version, author, GitHub, description, and timestamp)
- ποΈ Automatically creates versioned backups in
/versions/<version>
- π¦ Generates a clean /dist folder containing the latest build
- β Works seamlessly with ES Modules
simple-js-lib-builder/
βββ build.js # The main builder script
βββ package.json # Library metadata and build configuration
βββ src/
β βββ index.js # Your main source code (editable)
β βββ README.md # Your library documentation (editable)
βββ dist/ # Generated on build β contains the latest build
βββ versions/ # Automatically created β stores historical versions
βββ node_modules/ # Installed dependencies
git clone https://github.com/ramjam97/simple-js-lib-builder.git
cd simple-js-lib-builder
npm install
This installs Terser, which is used for code minification.
Edit your main source file at:
src/index.js
and update the documentation at:
src/README.md
You can use ES Modules syntax since the project is configured with "type": "module"
in package.json.
Open your package.json
and modify these fields to match your library:
{
"name": "Library Name",
"version": "1.0.0",
"description": "Short description of your library",
"author": "Your Name",
"git": "https://github.com/yourusername/your-repo",
}
Run the build command:
npm run build
This will automatically:
- Create
/dist
and/versions/<version>
folders - Generate:
index.js
index.min.js
README.md
- Add version banner headers
- Copy your documentation
After building, your project will look like this:
dist/
βββ index.js # Non-minified build
βββ index.min.js # Minified build
βββ README.md # Library documentation
versions/
βββ 1.0.0/
βββ index.js
βββ index.min.js
βββ README.md
Each build is timestamped and stored under /versions/<version>
for easy version tracking.
Each generated JS file will begin with:
/*!
* Library Name v1.0.0
* Description: Short description of your library
* Author: Your Name
* GitHub: https://github.com/yourusername/your-repo
* License: ISC
* Build Date: 2025-10-04 18:00:00 (Asia/Manila)
*/
To use this builder for a new library project:
git clone https://github.com/ramjam97/simple-js-lib-builder.git my-new-library
cd my-new-library
npm run build
# Step 1: Clone builder
git clone https://github.com/ramjam97/simple-js-lib-builder.git my-lib
cd my-lib
# Step 2: Install dependencies
npm install
# Step 3: Update package.json and edit src/index.js
# Step 4: Build
npm run build
# Step 5: Check output
ls dist
# => index.js, index.min.js, README.md
Package | Purpose |
---|---|
terser | Minify JS files for production |
Once your library is published on GitHub, you can serve it instantly through jsDelivr CDN β no npm publish or extra configuration required!
This allows developers (and you) to include your library directly in any web project using a simple <script>
tag.
Follow these steps after building and committing your latest version:
git push origin master
Make sure the tag matches your libraryβs version in package.json
(for example v3.0.0
):
git tag v3.0.0
git push origin v3.0.0
jsDelivr automatically scans GitHub repositories for new tags and hosts your files.
Once processed, your library will be available using this URL pattern:
https://cdn.jsdelivr.net/gh/<username>/<repository>@<version>/dist/index.min.js
Example (RamStateJs v3.0.0):
<script src="https://cdn.jsdelivr.net/gh/ramjam97/ram-state-js@v3.0.0/dist/ram-state.min.js"></script>
When you push a Git tag like v3.0.0
, jsDelivr:
- Detects the new tag in your public GitHub repo
- Caches the versioned files under that tag
- Makes them globally available through a CDN URL
This means every version you tag (v3.0.1
, v3.1.0
, etc.) gets its own CDN link that never changes or breaks.
Once hosted, anyone can include your library via CDN:
<!DOCTYPE html>
<html>
<head>
<title>Using RamStateJs</title>
<script src="https://cdn.jsdelivr.net/gh/ramjam97/ram-state-js@v3.0.0/dist/ram-state.min.js"></script>
</head>
<body>
<script>
console.log('RamStateJs loaded successfully!');
</script>
</body>
</html>
π‘ Tip:
Always tag stable versions (likev1.0.0
,v2.1.0
, etc.) after running npm run build.
This ensures the /dist folder in that tag contains your latest, production-ready build.
Ram Jam
π Philippines
π GitHub: ramjam97
This project is licensed under the ISC License β free to use and modify.