Use the lib-font browser bundle in a webpack project.

[matiasbenedetto]

Hi :wave: I'm trying to use the browser bundle in a large project where the dependencies are managed using NPM and the project is built using webpack. I have a few questions about that:

It seems like I can not import lib-font.browser.jsusing the npm installed package. Can I?

If I import { Font } from "lib-font" I get errors about fs and zlib missing dependencies. I could avoid that failure by adding the following config to the webapck config file. But due to characteristics of this project I can't modify the webpack config file.

    resolve: {
        fallback: {
            zlib: false,
            fs: false,
        },
    },

Apart I tried copying the entire lib-font.browser.js file into my project's source code I get errors when building the app with webapck:

ERROR in lib-font.browser.js 14:2-14
  Module not found: Error: Can't resolve 'fs' in 'fonts-modal'

If I delete the references to fs and zlib from lib-font.browser.js it works as expected but I would like to avoid forking the package. So I return to my original question: Is there any way to include the lib-font browser bundle in a npm + webpack project without errors about missing dependencies?

Thanks for the great work!

[Pomax]

I'm a little confused why you would add the browser library to your bundle when it's already a standard JS library that you can load with a <script> tag your html (template)? You can access any out-of-bundle global via the universal globalThis keyword (which in the browser maps to window and in Node maps to global).

[youknowriad]

I think the idea here is to avoid polluting the global window with the API for this library. Any variable added like that globally becomes defecto an API for third-party developers of our app that we may not want to expose (for backwards compatibility reasons)

[Pomax]

Then don't use lib-font.browser.js, use the normal module with externals (fs, zlib, etc) shims for in your webpack.config.js, or even better, don't bundle it in. Instead, generate an ESM bundle with ./lib-font-browser.js as an external so that webpack leaves that statement in your code as-is, and then when the browser loads in your bundle, normal in-browser ESM module loading will load that code in.

I'll add a section to the README on how to do this, although at this point I'm not sure it makes sense to even still use webpack, it's kind of a terrible bundler that we all used because as bad as it was, it was better than browserify. Ever since esbuild got released, webpack's been a legacy bundler.

(Having said that: other people using undocumented globals is their problem, not yours. If someone doesn't stick to your API docs, that's on them)

[Pomax]

https://github.com/Pomax/lib-font/#how-do-i-use-this-with-webpack