TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Install NPM dependencies that run in browser without Browserify, Webpack

170 pointsby darrinmabout 6 years ago

9 comments

lewisl9029about 6 years ago
HTTP2 solves the loading multiple dependencies in parallel part of the equation, but as far as I can see, the browser would still have to download each dependency before they can resolve their transitive dependencies, so wouldn&#x27;t this suffer latency issues due to requiring as many sequential client-server roundtrips as the max depth of your dependency tree?<p>SystemJS &amp; JSPM has been around for quite a while now, and the goals are similar to this project (to enable loading of any NPM dependency as native ES modules in the browser). They solve the roundtrip problem using an import map that&#x27;s generated by JSPM to pre-resolve all transitive dependencies, so they can be loaded by the browser up front with maximum parallelism.<p>However, this project specifically calls out the lack of a need for an import map in its description as an advantage, so I&#x27;m wondering if they have some alternative solution to this problem.<p>Also somewhat related: the project maintainers for SystemJS and JSPM also provide a CDN at <a href="https:&#x2F;&#x2F;jspm.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jspm.io&#x2F;</a> serving jspm packaged ES modules for all npm packages, so you can load them as native ES modules with a module script tag or native dynamic import() call in supported browsers. But they specifically mention that this CDN is meant for quick prototyping&#x2F;experimentation, and not suitable for production use due to latency issues, and recommend bundling workflows for production.<p>I&#x27;ve been following the SystemJS and JSPM projects for quite a while now, and I feel it&#x27;s a much better solution for module loading than webpack and the likes that hack together their own non-interoperable proprietary module loader rather than supporting and advancing the official ES module loading standard. But unfortunately that&#x27;s where the community is at, and SystemJS and JSPM has never been able to reach that critical mass of essential dev tooling that webpack &amp; others have enjoyed for quite some time (the major road block I ran into the last time I tried it was the lack of a good hot module replacement story for development targeting the latest SystemJS 2.0 environment).
评论 #19291856 未加载
_bxg1about 6 years ago
This has been the biggest thing holding back wide adoption of native ES modules: every single one of your dependencies has had to be a proper, browser-compatible module. Very exciting.
rubbingalcoholabout 6 years ago
I&#x27;m very curious how you could possibly avoid code bloat with this. Installing hundreds of megabytes of dependencies is fine server side, but won&#x27;t this approach lead to massive JS downloads?
评论 #19290785 未加载
评论 #19290783 未加载
kevinsimperabout 6 years ago
This is what I wished for when I began using Web Components, and it is super awesome +1
评论 #19290958 未加载
Klathmonabout 6 years ago
Wow, they claim that this is equal to or better than most apps that are bundled into a single bundle file due to the cache benefits!<p>I never would have guessed they could manage that and keep it this easy to use!<p>How common is the es module entry point in major packages?
评论 #19290801 未加载
评论 #19290569 未加载
评论 #19290789 未加载
Theodoresabout 6 years ago
This is brilliant for my efforts to just get started with THREE.js. I gave up due to module dependencies first time around, now I can actually get over that hurdle and get on to what I had planned to do with THREE.js maybe to do things the proper, optimised way with Browserify once I have some feasibility study done on my localhost where I don&#x27;t care about it being more than a rough prototype.
评论 #19292211 未加载
nailerabout 6 years ago
Does this work with commonjs modules or not? There&#x27;s so few tc39 modules it&#x27;s almost not worth considering otherwise.
评论 #19291072 未加载
ComputerGuruabout 6 years ago
I was excited but it looks like it&#x27;ll break Typescript&#x27;s module resolution. I&#x27;m sure someone will come up with something in time, but this is the same story over and over with web development this side of 2016. Nothing works together.
评论 #19293706 未加载
chrisweeklyabout 6 years ago
Way to take advantage of HTTP&#x2F;2. Really cool idea, and at a glance it looks like a reasonable implementation. Stoked to give this a try! :)
评论 #19291754 未加载