@n3dst4/browser-bundle

An opinionated browser code bundler using browserify & babelify

Installation

npm install @n3dst4/browser-bundle --save

Usage

import browserBundle from "@n3dst4/browser-bundle"
browserBundleTask(inFilePath, outFilePath [, options] )

where

• inFilePath is the path to the entry-point script for your build (this is passed to Browserified as entries)
• outFilePath is the path that the results will be saved under
• options is an optional object which, if present, may contain the following keys:
  • watch: if true, put the task into watch mode, i.e. become long-running and rebuild when changes occur to the source
  • production: if true, omit source maps and minify the resulting code

Returns an eventEmitter that represents the bundling stream. You can listen to the the "end" event to know when the bundling is completed.

In watch mode, there is also an updated event that is triggered after a rebuild has finished.

Examples

Just build the code once

This module exports a function which takes source and destination filename parameters, and builds and bundles your source.

import browserBundle from "@n3dst4/browser-bundle"

const entryPoint = "src/main.js"
const outFileName = "build/main.js"

browserBundle(entryPoint, outFileName)

In a gulp task

Wrap your call to browserBundle in an arrow function to easily turn it into a gulp-compatible task.

gulp.task("build", () => {
   browserBundle(entryPoint, outFileName)
})

Watch mode

The task can be configured to run in watch mode, i.e. it will become long-running and rebuild your bundle every time a change is detected. Do this by passing in an options object with watch set to true:

browserBundle(entryPoint, outFileName, {watch: true})

or in gulp:

gulp.task("watch", () => {
   browserBundle(entryPoint, outFileName, {watch: true})
})

Production mode

This module makes no assumptions about what you may or may not consider to be "production", e.g. it doesn't interrogate NODE_ENV. If you want to build in "production" mode, which omits source maps and minifies the code, pass the option production:

browserBundle(entryPoint, outFileName,
   {production: process.env.NODE_ENV === "production"})

or in gulp:

gulp.task("build", () => {
   browserBundle(entryPoint, outFileName,
      {production: process.env.NODE_ENV === "production"})
   })

Triggering browser reloads with .on("updated")

You can add an event listener for the "updated" event to trigger any kind of browser reload you might need (this package is not bound to any particular system.)

gulp.task("watch", () => {
   const task = browserBundle(entryPoint, outFileName, {watch: true}))
      .on("updated", browserSync.reload)
})