jsenv bundling

Generate bundles for the web or node.js.

Table of contents

• Presentation
• Bundle to global
• Bundle to systemjs
• Bundle to commonjs
• Code example
• Concrete example
  • Step 1 - Setup basic project
  • Step 2 - Install dependencies
  • Step 3 - Generate bundles
• Installation

Presentation

jsenv-bundling github repository corresponds to @jsenv/bundling package published on github and npm package registries.

@jsenv/bundling can generates bundle for systemjs, commonjs or global (also known as iife). Each format takes is meant to be used in a specific way explained below.

Bundle to global

Things to know about global bundle:

• Meant to run in a browser environment
• Needs collision free global variable
• Not compatible with code using dynamic import
• Not compatible with code using top level await

For example docs/basic-project/index.js is bundled to docs/basic-project/dist/global/main.js.

That global bundle could be used by

<script src="./dist/global/main.js"></script>
<script>
  console.log(window.__whatever__)
</script>

Bundle to systemjs

Things to know about systemjs bundle:

• Needs systemjs to be used
• Compatible with dynamic import
• Compatible with top level await

For example docs/basic-project/index.js is bundled to docs/basic-project/dist/systemjs/main.js.

That systemjs bundle could be used by

<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
<script>
  window.System.import("./dist/systemjs/main.js").then((namespace) => {
    console.log(namespace.default)
  })
</script>

Bundle to commonjs

Things to know about commonjs bundle:

• Meant to be required in a node.js environment
• Not compatible with code using top level await

For example docs/basic-project/index.js is bundled to docs/basic-project/dist/commonjs/main.js.

That commonjs bundle could be used by

const exports = require("./dist/commonjs/main.js")

console.log(exports)

Code example

The following code uses @jsenv/bundling to create a systemjs bundle for index.js entry point.

const { generateSystemJsBundle } = require("@jsenv/bundling")

generateSystemJsBundle({
  projectDirectoryPath: __dirname,
  bundleDirectoryRelativePath: "./dist",
  entryPointMap: {
    main: "./index.js",
  },
})

If you want to know more about this function and others check api documentation

Concrete example

This part explains how to setup a real environment to see @jsenv/bundling in action. You will setup a basic project where you can generate different bundle formats.

Step 1 - Setup basic project

git clone [email protected]:jsenv/jsenv-bundling.git

Step 2 - Install dependencies

cd ./jsenv-bundling/docs/basic-project

If you never configured npm authentification on github registry see Configure npm authentification on github registry first.

npm install

Step 3 - Generate bundles

This project has preconfigured 3 bundle. You can generate them with the commands below:

• docs/basic-project/dist/systemjs/main.js

  node ./generate-systemjs-bundle.js

• docs/basic-project/dist/global/main.js

  node ./generate-global-bundle.js

• docs/basic-project/dist/commonjs/main.js

  node ./generate-commonjs-bundle.js

Installation

If you never installed a jsenv package, read Installing a jsenv package before going further.

This documentation is up-to-date with a specific version so prefer any of the following commands

npm install --save-dev @jsenv/[email protected]

yarn add --dev @jsenv/[email protected]