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

webassemble

v0.1.5

Published

Utilize modules-webmake to auto bundle all CommonJS/Node.js pacckages for web browser

Downloads

7

Readme

webassemble

Auto bundle CommonJS/Node.js packages for web browsers.

Webassemble utilize Webmake to automatically bundle all CommonJS/Node.js packages to share them for the browser.

The reason of building this is that Webmake needs an JS package as entry point whose exported properties can be shared to the browser and so the responsibility of Webassemble is to automatically collect all exported properties from all JS packages you would like to share to browser as the input for Webmake. You can think of Webassemble is the preprocessor for Webmake.

For example, I have two utility classes would like to share between my Node.js application and browser processing.

date-util.js

'use strict';

var StringUtil = require('./string-util.js').StringUtil;

var DateUtil = (function () {
    return {
        DATE_FORMAT: 'yy' + DATE_ELEMENT_SEPARATOR + 'mm' + DATE_ELEMENT_SEPARATOR + 'dd',

        getDate: function (date) {
            if (StringUtil.isBlank(date)) {
                return null;
            }
            return date.split(' ')[0];
        }
    };
})();

exports.DateUtil = DateUtil;

string-util.js

'use strict';

var StringUtil = (function () {
    return {
        isBlank: function (str) {
            return str === null || typeof(str) === 'undefined' || str.length === 0;
        }
    };
})();

exports.StringUtil = StringUtil;

If I use the date-util.js as input for Webmake, only DateUtil will be exported. If I would like to export StringUtil too, I need to explicitly write a dummy package to requre and export both DateUtil and StringUtil.

Webassemble is made to write the dummy package for you.

How does it work?

Let's say if you would like to export above two packages to a file named bundles.js, you can execute below command:

$ webassemble date-util.js string-util.js bundles.js

It will generate a preprocess file as below. This file is actually the input file for Webmake.
bundles-pre.js

exports.DateUtil = require('./date-util');

exports.StringUtil = require('./string-util');

Installation

$ npm install -g webassemble

Usage

Run from shell:

$ webassemble <input> <output> [options]

input - JS package files to be included in the preprocess file for Webmake. Can be multiple.
output - Output filename.
options - All options Webmake can accept and some extra options listed below.

Extra Options

returnContentOnly boolean

Only return the preprocess file content without

preProcessOnly boolean

Only write the preprocess file content without calling webmake

If no destFile is provided or returnContentOnly is set to be true, the preprocess file content will be returned.

Call programmatically:

As it returns a Promise object, end() must be called to end the promise chain.

webassemble(srcFiles, destFile[, options]).end();

Grunt task:

Please check Gruntfile.js for sample usage.

Tests Build Status

$ npm test