Support packages with multiple modules

[maxwell8888]

Some npm packages have multiple entry points, so it does not make sense to bundle them into a single file in web_modules. For example, the lit-html package has a main entry point "module": "lit-html.js", which is bundled into web_modules also as lit-html.js, allowing import { html, render } from 'lit-html'; to execute successfully.

However, there are also other modules which the package provides, for example directives/until.js (these are documented in package.json under files: [ ... ]) which are intended to be importable with, for example, import { until } from 'lit-html/directives/until.js';. This is handled fine by rollup which is the tool I am currently using, but obviously not by snowpack, since it only bundles the single file.

Is it possible to configure snowpack to handle this case?

Thanks

[FredKSchott]

Hey Max, Snowpack should handle this use case just fine. By default, Snowpack will scan your project for all imports and then install dependencies based on exactly what you import. In your exact example, you'd have both web_modules/lit-html.js & web_modules/lit-html/directives/until.js.

In your project, you just import them as you would in any other bundled dev environment and Snowpack takes care of the rest.

[FredKSchott]

You can give it a try to confirm.

Also, if you can point to the docs that made it sound like this wasn't true, I'd love to update them to make this more clear.

[maxwell8888]

Wow, that's great, thanks! I only ran npx snowpack once, after npm i lit-html. Can confirm that running npx snowpack again after including import { until } from 'lit-html/directives/until.js'; does correctly bundle it into web_modules.

In terms of docs, the problem is I didn't realise that snowpack scans your source code, and assumed that npx snowpack instead scans node_modules (I think this is what pika used to do which is maybe why I thought this?). I've read the docs more fully now and found the line Snowpack scans your website/application for all used npm packages.

Personally, I would have found it helpful to have more info in "Getting Started". For example:

Get Started

Install Snowpack

# using npm
npm install --save-dev snowpack

# using yarn
yarn add --dev snowpack

Snowpack can also be installed globally via npm install -g snowpack. But, we recommend installing locally in every project via --save-dev/--dev. You can run the Snowpack CLI locally via package.json "scripts", npm's npx snowpack, or via yarn snowpack.

CLI

Snowpack scans your website/application for all used npm packages (** I think it would be helpful to say here how snowpack determines the entry point for your app **), reads these dependencies from your node_modules directory, and bundles them into separate JavaScript files.

The following commands can be used to create dependency bundles:

# Bundles dependencies and saves to `web_modules` folder.
npx snowpack

# starts a dev server which bundles dependencies on file save, and does not save to `web_modules` folder.
npx snowpack dev

# creates `build/` containing all application files, including `build/web_modules/` which contains the dependency bundles.
npx snowpack build

Create Snowpack App (CSA)

The easiest way to get started with Snowpack is via Create Snowpack App (CSA). CSA automatically initializes a starter application for you with a pre-configured, Snowpack-powered dev environment.

If you've ever used Create React App, this is a lot like that!

npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]

[FredKSchott]

Great feedback, added to #627 !