unpkg-bundler
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.11 • Public • Published

    unpkg-bundler

    A client-side transpiler, bundler as well as dynamic npm package fetch and load from unpkg.

    npm version install size license

    Install

    > npm install unpkg-bundler
    

    Tl;dr

    Features

    • unpkg-bundler is a transpiler and bundler that is made for use in the browser.

    • Under the hood, it uses esbuild to do the heavy lifting and actually consists of a few esbuild plugins.

    • supports both ES modules (esm) and CommonJS (cjs). The default entry point is the esm module.

      • if you want to use the cjs module require bundle from ./lib/cjs

    Why bother using unpkg-bundler ?

    • There are other bundlers out there that run in the browser so why use unpkg-bundler?

    The magic of unpkg-bundler is that it will automatically fetch and load npm packages from unpkg and add them to your bundle. 🤯

    Usage

    • unpkg-bundle has a single function: bundle
    • bundle is an async function
    • it takes a single string as an argument
    • it returns an object with a code property and an err property.
    const bundle = async (input: string): { code: string; err: string; } => {...};

    Examples

    The bundle function is called with a single string as an argument, without access to a file system. This makes it ideal for use in environments without a file system (such as a browser).

    Calling bundle

    // import the bundle function
    import bundle from 'unpkg-bundler';
    
    // call the (async) bundle function.
    const output = await bundle('const a = 1;');

    Basic Example

    // import the bundle function
    import bundle from 'unpkg-bundler';
    
    // 'modules' (code strings) to bundle
    const mod1 = 'const a = 1;';
    const mod2 = 'console.log(a)';
    
    // join the 'modules'
    const modules = [mod1, mod2].join('\n');
    
    // remember to mark the function async
    const createBundle = async () => {
      // bundle returns an object with two properties: code and err
      const { code, err } = await bundle(modules);
    };

    Realistic Usage

    // react component to bundle
    const input = 
    `
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const App = () => {
      return (
        <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>
          <h1>Hello jsx book!</h1>
          <h2>Start editing to create something magic!</h2>
          <p>By the way, you can import (almost) ANY npm package using our magic bundler</p>
        </div>
      );
    };
    
    ReactDOM.render(<App />, document.querySelector('#root'));
    `;
    
    // unpkg-bundler will automatically:
    // 1) fetch react and react-dom from unpkg and load them into your bundle
    // 2) transpile your code
    // 3) bundle your code
    const { code, err } = await bundle(input);

    Advanced Usage

    One way to use unpkg-bundler is as the engine for an online code editor.

    Demo App

    As a proof of concept, I made a bare bones 'code editor' in just under 90 lines of code using unpkg-bundler.

    Motivation

    Not too long ago I built an online code editor Contrived I had to write my own bundler and transpiler from scratch.

    I spoke to Stephen Grider a fair bit during this time about code execution in the browser.

    Stephen recently made a course on Udemy titled: React and Typescript: Build a Portfolio Project.

    unpkg-bundler was built as part of that course and I decided to give it a life of it's own.

    Fun Fact: unpkg-bundler is also currently powering the app I made in that course here: jsxbook.

    Contributing

    Yes. Do it. All about that.

    How to contribute

    1. Fork the project
    2. Create a feature branch (git checkout -b f/amazingFeature)
    3. Commit your changes (git commit -m 'added awesome sauce')
    4. Push to the remote branch (git push origin f/amazingFeature)
    5. Open a pull request.

    Contributors: 1

    License

    Distributed under the MIT License. See LICENSE for more information.

    Install

    npm i unpkg-bundler

    DownloadsWeekly Downloads

    1

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    37.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar