Rewrite browser extension: TS, no Webpack

Question

Rewrite browser extension: TS, no Webpack

basilesimon opened this issue 3 years ago · comments

Basile Simon commented 3 years ago

Ed Summers · Answer 1 · Thu Aug 12 2021 02:37:08 GMT+0800 (China Standard Time)

Sorry for the interruption: does using TyoeScript mean you no longer need Webpack to bundle for the browser?

Basile Simon · Answer 2 · Thu Aug 12 2021 16:41:58 GMT+0800 (China Standard Time)

Hey Ed, thanks for stopping by 👋

I'd love to do away with Webpack, if I'm honest. Doesn't really feel right to be installing 800+ packages for a browser extension...

This part of the plumbing, so to speak, isn't really my cup of tea, hence the help wanted tag 🙂

Would you happen to have thoughts or knowledge of these things, by any chance?

Basile Simon · Answer 3 · Fri Aug 13 2021 16:15:38 GMT+0800 (China Standard Time)

There's this rather feature-full template, which includes TypeScript (yay) but also React (uh), Babel (er), and Webpack (ah...). That's about 1,500 packages to install to run it...

Ed Summers · Answer 4 · Fri Aug 13 2021 20:59:46 GMT+0800 (China Standard Time)

I totally understand, and is exactly why I was asking :-) I've been meaning to switch over to using TypeScript and was wondering if it made some of the Webpack bloat go away.

I think one approach to doing away with Webpack while still using components is to use the browser's native support for custom elements. I think libraries like lit-element help with that. Packaging with Webpack or Rollup sneak back into the picture once you need to import another module. But if your browser extension doesn't really have any dependencies that need to be bundled along with it maybe this approach would work?

Basile Simon · Answer 5 · Mon Aug 16 2021 16:44:56 GMT+0800 (China Standard Time)

But if your browser extension doesn't really have any dependencies that need to be bundled along with it maybe this approach would work?

I know, it's tragic isn't it! A big reason for adding Webpack support was to offer a nicer dev experience, which quite frankly benefits from in-browser hot reloading without having to re-import your manifest into the browser...