[webpack] Transpile non-es5 third party dependencies

[hydrosquall]

Summary

This is a pass at using the are-you-es5 library (https://github.com/obahareth/are-you-es5 ) to determine which of the current dependencies need to be transpiled to ES5 to support older browsers. It appears that we have some dependencies that don't have non-ES5 entrypoints even before getting the extension system involved.

If this works, we could apply the are-you-es5 script programmatically to the extensions directory, and can in the longer term help with #902 .

The fuller solution would be to run this script as a postinstall as described in this article, but I wanted to first confirm whether transpiling these specific modules actually solved the issue in older browsers (which I currently don't have access to).

[jameshadfield]

Thanks @hydrosquall! We currently use modules such as chalk only in the auspice server code, which should never be transpiled, as it's never run in-browser (webpack is only used for the auspice client). Is there a way to make webpack only follow the imports which trace back to the entry?

[hydrosquall]

Hi @jameshadfield , I see! In that case, then I see how the commit I added wouldn't affect the browser bundle, since all of the excluded dependencies (node-fetch, express-naked-redirect, etc) are just for the server. I'll close this PR, thanks for taking a look.

From my reading of @obahareth's comment here, it looks like this library either checks package.json or node_modules, and doesn't necessarily check the runtime-level imports.

I wonder if moving the server-only dependencies to devDependencies instead of dependencies would make are-you-es5 skip these server-side only libraries- probably something to investigate in a separate issue.

[jameshadfield]

I haven't dug deep into webpack since I wrote auspice's extension machinery, but I think a good audit of exactly which dependencies are getting pulled into auspice is needed.

What's desired is that webpack (via babel) transpiles

1. all code imported by the entrypoint (i.e. the client), and doesn't touch the packages in node_modules which are only used by the auspice server
2. all code imported by client extensions (but not other modules within the node_modules in the extension directory). This is complicated by the fact that if an extension depends on react then we want to ensure we are using auspice's version of react!

[jameshadfield]

Thanks for your help @hydrosquall, we really appreciate it!

[hydrosquall]

all code imported by entrypoint || client_extensions

It would be more involved, but I suspect that we could use one of these libraries like this to check imports at runtime, then pass the imported listed of 3p dependencies to the "check if es5" functionality of are-you-es5: https://github.com/dyatko/arkit#relevant-projects

I won't be able to pursue this extra search in the near term, so if anybody else reading this feels inspired, I have some resources about working with JS dependency graphs that may be useful: https://github.com/hydrosquall/code-maps-frontend