@pika/plugin-bundle-web

A @pika/pack build plugin. Adds a bundled Web distribution to your package, built & optimized to run in most web browsers (and bundlers). Useful for hosting on a CDN like UNPKG and/or when package dependencies aren't written to run natively on the web.

Install

# npm:
npm install @pika/plugin-bundle-web --save-dev
# yarn:
yarn add @pika/plugin-bundle-web --dev

Usage

{
  "name": "example-package-json",
  "version": "1.0.0",
  "@pika/pack": {
    "pipeline": [
      ["@pika/plugin-standard-pkg"],
      ["@pika/plugin-build-web"], // Required to precede in pipeline
      ["@pika/plugin-bundle-web", { /* options (optional) */ }]
    ]
  }
}

For more information about @pika/pack & help getting started, check out the main project repo.

Options

• "sourcemap" (Default: "true"): Adds a source map for this build.
• "browser" (Default: false): If true, this plugin will respect the "browser" field in bundled dependencies over the usual "main" Node-specific entrypoint. This may be required for some dependencies, but may cause problems with others. YMMV.
• "namedExports" (Default: undefined): Ecplicitly specify unresolvable named exports (See rollup-plugin-commonjs for more information).
• "minify" (Default: true): Specify if bundle should be minifed using terser or not. Can also be terser options object to further tweak minification.
• "targets" (Default: {"esmodules": true}): The browsers supported/targeted by the build. Defaults to support all browsers that support ES Module (ESM) syntax.
• "entrypoint" (Default: "browser"): Customize the package.json manifest entrypoint set by this plugin. Accepts either a string, an array of strings, or null to disable entrypoint. Changing this is not recommended for most usage.
  • {"entrypoint": "browser"} will create an "browser" entrypoint that points to "dist-web/index.bundled.js". This is supported by both unpkg and jsdelivr.
  • {"entrypoint": ["unpkg", "jsdelivr"]} will create both "unpkg" & "jsdelivr" "dist-web/index.bundled.js" entrypoints.

Result

1. Adds a web bundled distribution to your built package: dist-web/index.bundled.js
2. ES Module (ESM) syntax
3. Transpiled to run on all browsers where ES Module syntax is supported.
4. All dependencies inlined into this file.
5. Minified using terser (Can optionally be skipped)
6. (if specified) Adds the file to your specified "entrypoint".

Note that this does not add or modify the "module" entrypoint to your package.json. Bundles should continue to use the "module" entrypoint, while this build can be loaded directly in the browser (from a CDN like UNPKG).