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

@mobilabs/es6kadoo

v2.2.1

Published

A template for writing pure ES6 Javascript libraries

Downloads

23

Readme

ES6Kadoo

NPM version GitHub last commit Github workflow Test coverage npm bundle size License

ES6Kadoo is a boilerplate for writing ES6 Javascript libraries that run on both Node.js and ECMAScript 2015 (ES6) compliant browsers.

The build doesn't require a transpiler (like babel) or a builder (like browserify, webpack or rollup) to produce a module that runs in the browser from source files that use import and export statements. It is useful if you want to keep your source code quite pure.

ES6Kadoo relies on Kadoo to drastically reduces the amount of extra code added to your library (go to kadoo for details).

ES6Kadoo relies on Mocha and Chai for unitary testing. It relies on Istanbul for code coverage.

ES6Kadoo uses Github Actions for continuous integration and Coveralls.io to display test coverage.

Nota:
ES6Kadoo is a fork of the boilerplate ES6lib.

Quick Startup

You can easily get your first ES6Kadoo library running in a couple of minutes by just typing a few command lines. But first, you need to create an empty folder. It will contain your library.

Then, you just need to create a package.json file that contains:

{
  "name": "NameOfYourProject",
  "scripts": {
    "create": "npm install @mobilabs/es6kadoo && npm run populate",
    "populate": "es6kadoo populate --name $npm_package_name --author $npm_package_config_name --acronym $npm_package_config_acronym --email $npm_package_config_email --url $npm_package_config_url && npm install && npm run build:dev && npm run test && npm run report"
  },
  "config": {
    "name": "John Doe",
    "acronym": "jdo",
    "email": "[email protected]",
    "url": "http://www.johndoe.com/"
  }
}

Replace NameOfYourProject by your project name and fill writer with your credentials.

And finally, type in the terminal:

npm run create.

That's almost all! When the script has been executed, your folder contains the following files:

Your project Folder
      |_ .github
      |     |_ workflows
      |           |_ ci.yml    // Github Workflow file (if you use it),
      |_ lib
      |   |_ lib.js           // Your built UMD module,
      |   |_ lib.mjs          // Your built ES6 module,
      |_ src
      |   |_ ...              // The source files of your library,
      |   |_ ...
      |   |_ ...
      |_ tasks
      |   |_ ...              // The tasks to build your project,
      |_  test
      |     |_ main.js        // Your Mocha, Chai test file,
      |_ .eslintignore        // Files to be ignored by ESLint,
      |_ .eslintrc            // A Configuration file for the ESLint linter tool (if you use it),
      |_ .gitignore           // Files that Git must ignore (if you use git),
      |_ .npmignore           // Files that Npm must ignore (optional),
      |_ .CHANGELOG.md        // The changes between your different versions,
      |_ index.js             // The link to your ES5 library,
      |_ LICENSE.md           // The license that applies to your library (here MIT),
      |_ package-lock.json    // The NPM dependency tree,
      |_ package.json         // The NPM package file,
      |_ README.md            // Your README file,

This folder is now a NPM package.

How to build it

The file package.json contains the build instructions. These instructions populate the folder lib from the sources files included in the folder src.

package.json implements two operations for the build:

  • the command npm run build:dev: creates the library at the execution,
  • and the command npm run watch updates the library when one of the source files is modified.

How to test it

Your package.json file contains three scripts to test your UMD library:

  • npm run test,
  • npm run check:coverage,
  • npm run display:coverage.

npm run test executes the tests and computes the test coverage.

npm run check:coverage checks if the test coverage matches the requirements. Here 100%.

npm run display:coverage opens your browser and reports the test coverage.

How to create a distribution version

Your package.json file contains a script to build a distribution library:

  • npm run build:prod

The script build:prod adds a license header to the library and creates a minified version.

How to use it

On Node.js

Create a new project folder aside your project. Then, install your package by typing:

npm install ../your_project_library

Open a Node.js session and type:

node
> var mylib = require('mylib');
undefined
> mylib.getString();
'I am a string!'
> mylib.getArray();
[ '1', '2', '3' ]
>

Inside the browser

Inside the browser, pick-up the JS file lib/mylib.js and add it as a script in your HTML file. mylib is an immediately-invoked function expression. It attaches the mylib variable to the current context.

<!DOCTYPE html>
<html>
  <body>
    <script src="./path_to_your_lib/mylib.js"></script>
    <script>
    	console.log(mylib.VERSION);
    </script>
  </body>
</html>

Or,

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import mylib from './<path_to_your_lib>/mylib.mjs';

      console.log(mylib.VERSION);
    </script>
  </body>
</html>

Enjoy!

License

MIT.