Snowpack: Add Rollup bundler plugin

[drwpow]

From Pika discussion: https://www.pika.dev/npm/snowpack/discuss/494#comment-8053

We have a webpack & Parcel bundler plugin, but no Rollup one. Now that we’ve improved our plugin API, now would be a perfect time to add one.

cc @antony You mentioned you’d already written one. Do you have any interest in making a PR to add it? Would love to use what you’ve found as a starting base (note that we’d recommend using our new plugin API though for best results)

[antony]

Hi @drwpow - I do! It's in the discussion you have linked in your comment :)

I could add a PR, if you like, but I'm not sure how ready it is. It works for my use case, but as I mentioned it is more of a Base than a finished article right now.

[jokull]

I've found that you can just use Rollup for production builds alongside Snowpack without any plugins.

The reason I went down this route is because I could not get the babel plugin to output a CSS file (to avoid a flash-of-unstyled-content).

Here's my config:

import postcss from "rollup-plugin-postcss";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default {
  input: "src/index.js",
  treeshake: true,
  output: {
    entryFileNames: "[name]-[hash].js",
    dir: "dist",
    format: "es",
    sourcemap: true,
    plugins: [terser()],
    manualChunks: (id) => {
      if (id.includes("node_modules")) {
        return "vendor";
      }
    },
  },
  plugins: [
    postcss({
      plugins: [],
      extract: true,
    }),
    babel({ babelHelpers: "bundled" }),
    resolve({ browser: true }),
    commonjs(),
  ],
};

[jeberly]

@jokull I have been doing the same, but I had to do a workaround to make the SNOWPACK_PUBLIC_* environment variables work. I used 'dotenv' and @rollup/plugin-replace to define another variable. eg. = import.meta.env || __myapp.env;

If anybody has a better idea for that, let me know.

[FredKSchott]

@ParamagicDev has been doing some work on this! I just saw him tweeting about it this morning
👀 👀 👀 https://twitter.com/RogersKonnor/status/1302369247738376195

[ParamagicDev]

Right now it's just a glorified manifest.json generator....if you wanna take a peek at what I have so far be my guest. I still need to add chunks to the Manifest as well.

Anyways, there an example dir in the tests folder that will populate the build directory and give you an idea of the expected output.

https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle/tree/development

And here's the rollup "config" (it's using the JS API)

https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle/blob/development/src/options.js

And obviously if you'd like to file any issues or open any PRs anyone is more than able to.

[jokull]

@jeberly funny you should mention that, I was doing exactly that today to augment my setup with a Sentry logger!

[FredKSchott]

If this is a common pattern, we should look into a dedicated plugin hook. addSnippet()?

[ParamagicDev]

I have a package out in the wild of using Rollup for production via a plugin. Would love to get some additional people to try it out.

https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle

[FredKSchott]

A huge thanks again to @ParamagicDev for his work on https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle ! I went ahead and added links to our docs and README. We'll leave this as a community plugin for now, with an eye to create an official one down the road if there is enough interest.

[canadaduane]

There is also https://www.npmjs.com/package/@carv/snowpack-plugin-rollup, which may be useful for reference (however, its corresponding github repository seems to have been (re)moved).