@jsenv/bundling

8.1.0 • Public • Published

jsenv bundling

github package npm package github ci codecov coverage

Generate bundles for the web or node.js.

Table of contents

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/systemjs@6.1.4/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 git@github.com: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:

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/bundling@8.1.0
yarn add --dev @jsenv/bundling@8.1.0

Readme

Keywords

none

Package Sidebar

Install

npm i @jsenv/bundling

Weekly Downloads

23

Version

8.1.0

License

MIT

Unpacked Size

527 kB

Total Files

34

Last publish

Collaborators

  • dmail
  • jsenv-admin