1

How can I load a library that can be loaded only trough require without using webpack, compilation, traspilation, uglification etc.

Let's say: https://github.com/stutrek/scrollMonitor

The code is vanilla javascript and has no external dependencies, however the script cannot be put in the head.

var scrollMonitor = require("scrollmonitor"); // if you're old school you can use the scrollMonitor global.

My preferred option would be to do:

<script src="./scrollMonitor.js"></script>

But that does not work. What is the next easiest option that avoids webpack etc. ?

I tried with ES6 import:

import * as scrollMonitor from './scrollMonitor.js';

But that returns just empty object.

Thanks for help.

Isinlor
  • 1,111
  • 1
  • 13
  • 22
  • You need an implementation of `require`. Use WebPack. – Quentin Apr 13 '19 at 20:55
  • @Quentin I did try WebPack, but I ended up having issues with SourceMaps in Firefox: https://github.com/webpack/webpack/issues/1194 I really want to avoid serving browser different code from what I see when I code. – Isinlor Apr 13 '19 at 21:44

3 Answers3

1

Seems like it is possible using getlibs package:

<!-- index.html -->
<html>
<body>
    <script src="https://unpkg.com/getlibs"></script>
    <script>
         System.import("./script.js");
    </script>
</body>
</html>

// script.js
console.log(require('scrollmonitor'));

Working example: https://glitch.com/edit/#!/aromatic-flamingo

In the script above scrollmonitor is loaded from https://unpkg.com/ however this method works also with local files. I think that solves my problem fully.

Another solution seems to be Pika-Web:

A Future Without Webpack

@pika/web installs modern npm dependencies in a way that lets them run natively in the browser, even if they have dependencies themselves. That’s it. It’s not a build tool and it’s not a bundler (in the traditional sense, anyway). @pika/web is a dependency install-time tool that lets you dramatically reduce the need for other tooling and even skip Webpack or Parcel entirely.

It all comes down to a tradeoff between performance, caching efficiency, and how much complexity you feel comfortable with. And again, this is the entire point of @pika/web: Add a bundler because it makes sense to your situation, not because you have no other choice.

@pika/web checks your package.json manifest for any "dependencies" that export a valid ESM “module” entry point, and then installs them to a local web_modules/ directory. @pika/web works on any ESM package, even ones with ESM & Common.js internal dependencies.

https://www.pika.dev/blog/pika-web-a-future-without-webpack/

However, it works only with a valid ESM "module" entry point. Not the case with scrollMonitor.

Damien
  • 1,140
  • 15
  • 22
Isinlor
  • 1,111
  • 1
  • 13
  • 22
  • Note that Pika-Web has been superseded by [Snowpack](https://www.snowpack.dev/). – Damien Jul 04 '23 at 07:12
  • 1
    Note that Snowpack is no longer maintained. See [Vite](https://vitejs.dev/) and [esbuild](https://esbuild.github.io/). This comment will probably be outdated next month. – Damien Jul 04 '23 at 07:22
0

My preferred option would be to do:

<script src="./scrollMonitor.js"></script>

But that does not work.

This variant is supported by the library, but it shouldn't be put into head. Just try to add it to the end of body. Also the global variable scrollMonitor should appear.

Community
  • 1
  • 1
artptr
  • 254
  • 2
  • 9
0

That package includes a fallback global, so you can do this:

import './scrollMonitor';

This makes scrollMonitor available on the window object for you work with.

Kevinleary.net
  • 8,851
  • 3
  • 54
  • 46