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

welcomejs

v0.0.2

Published

A welcome library where the modules will welcome you (ie the output of a getting started tutorial)

Downloads

4

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

gerardnicogerardnico

Keywords

getting_startedwebpacknodelibrary

Readme

Welcome Library

Introduction

The welcome Library is a minimal (getting started) javascript library that will welcome you from two modules.

The story (or blog) over this repository can be found here:

This repository will build a library:

  • exposed as the global variable welcome
  • saved in the file prefix-welcome.js
  • aggregating two modules (foo and bar)
  • testing a method

The tool used are:

  • Node for the module dependency
  • WebPack as builder.
  • Jest as test runner

Output

The output from the browser or from Node will be

Welcome from the foo package !
A warm Welcome from the bar package !

Usage of the Git Repository

git clone https://github.com/gerardnico/welcomejs
  • Execute a npm install
  • Execute a npm run test to execute the test with Jest through npm
npm run test

Jest output

  • Execute a npm run build to build the library prefix-welcome.js in the directory dist
npm run build

Webpack output

  • Run the examples given in the usage section below.

Usage of the final library with examples

Node

See the file welcomeLibInNode.js

var welcome = require("../dist/prefix-welcome");
console.log(welcome.foo());
console.log(welcome.bar());
  • Run it
C:\welcome\example>node welcomeLibInNode.js
  • Output:
Welcome from the foo package !
A warm Welcome from the bar package !

Browser

See the file welcomeLibInBrowser.html

<html>
<!--
If published in Node
<script src="https://unpkg.com/myLisbrary"></script>
Otherwised locally
-->
<script src="../dist/prefix-welcome.js"></script>
<body>
</body>
<script>
    // Global variable
    var welcomeFoo = welcome.foo();
    // Property in the window object
    var welcomeBar = window.welcome.bar();
    document.body.innerHTML = "<h2>"+welcomeFoo+"</h2><h2>"+welcomeBar+"</h2>";
</script>
</html>
  • Run it:

Browser output example

Note on dependency

Note on thenpm configuration file package.json:

  • Babel has been added to be able to use the import statement with the jest test framework. jest is a node process and actually understand only require
  • Webpack 2 understands natively the import statement.

Git

  • package-lock.json should be versionned. npm create it. It's a lockfile that is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.