Build as a single file for use in a <script>?

[karx1]

Hi, I'm working on 2m2d whose webserver is written in Rust, so I can't use npm for the frontend (It has to be static sites only). Is there a way to build this library as a single file so I can load it in a <script> tag?

[will-abule]

@karx1 I'm pretty sure Rust has a way to render static files so you can try the following

1. create a new folder and name it something like npm-packages
2. create an index.js file in the folder
3. Initialize npm using npm init
4. install the module with npm i flamethrower-router (NOTE this applies to any other npm library/packages/module)
5. install webpack
6. in the index.js file import the entire library/packages/module and save it as a window object
7. build the index.js with webpack to a new js file eg dist/bundle.js.

That's it you can now import the build file as a script tag in your HTML and use window.(whatever you named it) to access the library/packages/module features

Example, to be clearer

npm-packages/index.js

import flamethrower from 'flamethrower-router';

window.router = flamethrower();

bundle index.js with webpack

HTML

<script src="dist/bundle.js"></script>

Usage

<script>

    const router = window.router
    router.go('/somewhere');

</script>

just remember to export the path to the bundled file and import it accordingly in your HTML script tag.

I usually do this when I'm working with Go using Gin Framework.

[codediodeio]

Clone it and run npm run build to generate the main.js bundle, then use it in a module script:

<script type="module">
  import flamethrower from '/path/to/main.js';
  const router = flamethrower();
</script>

[bennykay]

You can also clone my webpack wrapper for flamethrower github.com/bennykay/flamethrower-webpack and run npm run build to get a single flamethrower.js bundle in your /dist folder.

If you want to change options, you can do it before building in src/index.js.

[shreyassanthu77]

Or just visit this link and download the output

[micziz]

Another option is to use the ESM CDN as shown here #31

[DarrenSem]

Hi, I'm working on 2m2d whose webserver is written in Rust, so I can't use npm for the frontend (It has to be static sites only). Is there a way to build this library as a single file so I can load it in a <script> tag?

@karx1
Most examples seem to use import AKA they presume ES6 modules.

You could also include from unpkg, since Jeff published this to npm:

<script href="https://unpkg.com/[email protected]/dist/main.umd.cjs">

URL found via the ending-slash trick:
https://unpkg.com/flamethrower-router/

NOTE: I haven't tried this yet, but it seems to use the standard Universal Module Definition