Needlessly Promiscuous, Modularize!
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


3.25.0 • Public • Published


Config-free bundler for ES6 React apps.


  • Simple CLI for prod and dev environment
  • Unique solution for bundling; no boilerplate, no config.
  • Remote improvements inherited transparently (ej: monitoring, PWA, etc)


$ npm install @s-ui/bundler --save-dev

Usage for web app bundling

Add bundling scripts to your package.json

  "name": "my-awesome-package",
  "version": "1.0.0",
  "scripts": {
    "build": "sui-bundler build -C",
    "start": "sui-bundler dev"

Requirements for web app bundling

node 6+ version is required.

Folder structure

Refer to example folder to see what's expected, which is basically:

├── package.json
└── src
    ├── index.html
    └── app.js

With index.html as app home andapp.js as entry point.



$ sui-bundler dev

While developing your app, you will have HMR (Hot Module Reloading). Default port for your website is 3000, but it will assign automatically a free port for you if this one is busy.


$ sui-bundler build

It will build a deployable folder public where you can find all your statics. If you wish to remove the content of the folder before generating new files, just use the flag --clean | -C


You can use sui-bundler to bundle a package as a library that can be injected with a simple script tag.

$ sui-bundler lib

You should create an entry file that assigns your lib to your desired namespace:

// umd.js
import MyFancyModule from '/src/index.js'
window.namespace.fancy = MyFancyModule

You should create an entry file that assigns your lib to your desired namespace:

And then execute sui-bundler lib with your destination config:

sui-bundler lib umd/index.js -o lib/fancy -p

sui-bundler lib will add your package version as subfolder:

  • -o lib/fancy outputs to ./lib/fancy/0.0.0/
  • -p sets as public path for chunks loading.
  • -r sets as public path for chunks loading, discarded the version subdirectory.

Automatic UMD

You can use --umd option to publish directly from your original entry file:

$ sui-bundler lib src/index.js -o umd/fancy -p --umd="MyFancyLibraryNamespace"

Then you can find your library directly in the provided namespace variable: window.MyFancyLibraryNamespace or window.MyFancyLibraryNamespace.default for ES6 exports.


This tool works with zero configuration out the box but you could use some configuration in order to optimize or adapt the output to your needs. For that, you need to add a property sui-bundler inside the package.json of your project.

scripts property accept ScriptExtHtmlWebpackPlugin config:

  "sui-bundler": {
    "env": ["APP_NAME", ["USER", "DEFAULT_VALUE"]],
    "vendor": ["react", "react-dom"],
    "cdn": "",
    "alias": {"react": "preact"},
    "offline": true,
    "externals": {
      "jquery": "./node_modules/jquery/jquery.min.js"
    "scripts": {
       "prefetch": "low-priority-chunk.js",
       "preload": [ "page1.js", "page2.js" ]

The URL to the CDN MUST end with a slash /


Offline feature is deactivated by default. If you want to activate, you should put offline: true in the sui-bundler configuration in your package.json. Also, you need to configure a serviceWorker in the entry point of your app:

import {register, unregister} from '@s-ui/bundler/registerServiceWorker'
  first: () => window.alert('Content is cached for offline use.'),
  renovate: () => window.alert('New content is available; please refresh.')

You should pass a handler in order to handle when content gets cached for the first time the content and another when you get new content and want to handle how to show a notification to the user in order to let him decide if he wants to refresh the page.

If you're using Firebase, it's recommendable to not cache the file serviceWorker.js, adding this config to your firebase.json

  "hosting": {
    "headers": [{
      "source" : "/service-worker.js",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "no-cache"

If you want to remove your ServiceWorker, you need to use the method unregister, the same way you used the register method before.


You could use it to be used offline:

"offline": {
  whitelist: ["::all::"]
  "runtime": [{
    "urlPattern": "ms-mt--api-web\\.spain\\.schibsted\\.io",
    "handler": "networkFirst"
    "urlPattern": "fonts\\.googleapis\\.com",
    "handler": "fastest"
    "urlPattern": "prea\\.ccdn\\.es\/cnet\/contents\/media",
    "handler": "cacheFirst",
    "options": {
      "cache": {
        "name": "image-cache",
        "maxEntries": 50

Runtime follows the (API of sw-toolbox)[]. Also, the whitelist is a list of regexp that indicates which pages are secure to use only Client Server Rendering. You could use the ::all:: string to indicate that you always want to use Client Side Rendering.


It offers you a way to upload an external library to your project that you would normally put by hand in a tag script in the index.html file. It adds a reference in the index.html with a hash.

Hot Module Replacement - React

It offers Hot Module Replacement out-of-the-box, you only have to follow these instructions for your project.


Please refer to the main repo contributing info.




npm i @s-ui/bundler

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
Report a vulnerability