4 ms·

I started using Snowpack just last week, but I'm not even using the dev server or the bundler part. All I really needed was its ability to convert npm packages

I started using Snowpack just last week, but I'm not even using the dev server or the bundler part. All I really needed was its ability to convert npm packages into single-file ES modules. Once everything is an ES module you can just let the browser load them all, no bundler or dev server needed at all in your dev cycle. The only dev-time conversion needed is the compilation from typescript to JS, which my IDE already does instantly whenever I save. Previously this worked fine for all our own code but not for dependencies, so I'm pretty happy Snowpack was able to solve that problem.

_bxg1 6y ago
How does it work with shared dependencies? Does each direct npm dependency get bundled with its own copy of each shared dependency, or do those get re-wired to point to a shared module?
- elpool2 6y ago
  I haven't run into it yet so I'm not sure about this, but I believe it does have a way to combine shared dependencies into a single shared js file.
- dgoldstein0 6y ago
  Under the hood it's using rollup. So it's benefiting from rollup's code splitting for those cases.
gavinray 6y ago
Snowpack's web_modules build step produces a single-file ESM bundle for each NPM lib? I wasn't aware of this, that's actually a pretty cool feature and incredibly useful. A bit unlearned on ESM modules, how are they different from the isomorphic browser/Node single-file bundles produced by Webpack/Rollup?
- RobertKerans 6y ago
  They're actual ES modules (so with the `export` syntax on their end, allowing `import` with `<script type="module">` in compliant browsers). Most NPM modules aren't ESM and aren't usable in that way. This allows it, it's a really good thing! Hopefully pushes things towards much wider usage of modules in the browser, which would make a life a bit more sane in FE world.
- elpool2 6y ago
  Yeah, that's basically what it does. An ES module is just a js file that can be imported by other js files with the "import X from 'module.js'" syntax. This is different from CommonJS modules which use the "var x = require("module")" syntax. Modern browsers (Chrome and Firefox) know how to load ES modules, so if all your js code is written as ES modules you can just load your main.js file and then the browser will go fetch all the other modules it depends on. It used to be that you needed a loader like require.js to handle loading all the module dependencies, but that's no longer the case. But you run into an issue when you want to use 3rd party libraries that you've installed using NPM. Most libraries still use the CommonJS syntax, because that's what Node uses. Since they're not ES modules the browser can't fetch them natively and you need to have either a loader like requirejs or a bundler like Webpack. Snowpack will convert each NPM library into an ES module for you. So you just run "Snowpack install" once, and then add "import X from '/web_modules/module.js'" to your code, and you're set. You still need to bundle before you ship your code, because not all browsers speak ES module and there are still performance benefits from bundling/minifying/etc. But having everything just load in the browser natively when you're developing is quite nice.
  - gavinray 6y ago
    > "Since they're not ES modules the browser can't fetch them natively and you need to have either a loader like requirejs or a bundler like Webpack. Snowpack will convert each NPM library into an ES module for you. So you just run "Snowpack install" once, and then add "import X from '/web_modules/module.js'" to your code, and you're set." Ahh understood!
  - Yaggo 6y ago
    Safari and Edge also support ES modules. https://caniuse.com/#feat=es6-module https://caniuse.com/#feat=es6-module

_bxg1 6y ago

How does it work with shared dependencies? Does each direct npm dependency get bundled with its own copy of each shared dependency, or do those get re-wired to point to a shared module?

elpool2 6y ago
I haven't run into it yet so I'm not sure about this, but I believe it does have a way to combine shared dependencies into a single shared js file.
dgoldstein0 6y ago
Under the hood it's using rollup. So it's benefiting from rollup's code splitting for those cases.

gavinray 6y ago

Snowpack's web_modules build step produces a single-file ESM bundle for each NPM lib? I wasn't aware of this, that's actually a pretty cool feature and incredibly useful. A bit unlearned on ESM modules, how are they different from the isomorphic browser/Node single-file bundles produced by Webpack/Rollup?

RobertKerans 6y ago
They're actual ES modules (so with the `export` syntax on their end, allowing `import` with `<script type="module">` in compliant browsers). Most NPM modules aren't ESM and aren't usable in that way. This allows it, it's a really good thing! Hopefully pushes things towards much wider usage of modules in the browser, which would make a life a bit more sane in FE world.
elpool2 6y ago
Yeah, that's basically what it does. An ES module is just a js file that can be imported by other js files with the "import X from 'module.js'" syntax. This is different from CommonJS modules which use the "var x = require("module")" syntax. Modern browsers (Chrome and Firefox) know how to load ES modules, so if all your js code is written as ES modules you can just load your main.js file and then the browser will go fetch all the other modules it depends on. It used to be that you needed a loader like require.js to handle loading all the module dependencies, but that's no longer the case. But you run into an issue when you want to use 3rd party libraries that you've installed using NPM. Most libraries still use the CommonJS syntax, because that's what Node uses. Since they're not ES modules the browser can't fetch them natively and you need to have either a loader like requirejs or a bundler like Webpack. Snowpack will convert each NPM library into an ES module for you. So you just run "Snowpack install" once, and then add "import X from '/web_modules/module.js'" to your code, and you're set. You still need to bundle before you ship your code, because not all browsers speak ES module and there are still performance benefits from bundling/minifying/etc. But having everything just load in the browser natively when you're developing is quite nice.
- gavinray 6y ago
  > "Since they're not ES modules the browser can't fetch them natively and you need to have either a loader like requirejs or a bundler like Webpack. Snowpack will convert each NPM library into an ES module for you. So you just run "Snowpack install" once, and then add "import X from '/web_modules/module.js'" to your code, and you're set." Ahh understood!
- Yaggo 6y ago
  Safari and Edge also support ES modules. https://caniuse.com/#feat=es6-module https://caniuse.com/#feat=es6-module