snowpack-plugin-rollup-bundle

A snowpack plugin to build your files for production using Rollup.

This plugin was developed as a way of integrating Snowpack with Rails.
I'm more than happy to support any issues you may have. Currently, this
package was built with my gem called Snowpacker in mind. Feel free to
file issues, submit PR's, etc.

Requirements

- Node >= 12
- Snowpack

Usage

$3

``bash
yarn add rollup snowpack-plugin-rollup-bundle [--dev]


OR


npm install rollup snowpack-plugin-rollup-bundle [--save-dev]
`

$3

`js
// snowpack.config.js

const plugins = [
// ...
[
"snowpack-plugin-rollup-bundle",
{
emitHtmlFiles: boolean,
preserveSourceFiles: boolean,

// equivalent to inputOptions.input from Rollup
entrypoints: string | string [] | { [entryName: string]: string },

extendConfig: (config) => {
// https://rollupjs.org/guide/en/#outputoptions-object
config.outputOptions = { ... }

// https://rollupjs.org/guide/en/#inputoptions-object
config.inputOptions = { ... }

return config
}
}
]
]

module.exports = {
plugins: plugins
}
`

$3

#### emitHtmlFiles

type: boolean

default: false

If your source directory contains HTML files, this will rewrite your
script tags. This will not rewrite stylesheet tags (this actually
injects stylesheets into your head) and will not rewrite asset paths.

#### preserveSourceFiles

type: boolean

default: false

This is meant as a debugging tool. This will put the original build
files from Snowpack into a _source_ directory.

#### entrypoints

type: string | string [] | { [entryName: string]: string }

required

Entrypoints should be entrypoints found in your build/ directory and
not your source files.

arrays and objects will be parsed normally.

A string will be passed as a parameter to glob.sync()

https://github.com/isaacs/node-glob
for more info on glob.

#### extendConfig

type: function(): object | object

the extendConfig hook allows you to directly modify the rollup config.
For example, if you would like to add a rollup plugin to the build
process you would do:

`js
const awesomeRollupPlugin = require("awesome-rollup-plugin")

const plugins = {
[
"snowpack-plugin-rollup-bundle",
{
extendConfig: (config) => {
config.inputOptions.plugins.push(awesomeRollupPlugin())
return config
}
}
]
}
`




What it does

This plugin will bundle your specified entrypoints for production.
Each entrypoint has a corresponding css file. This plugin will also
generate a top level manifest.json file with the locations of all your
hashed files. Heres how a typical project would get bundled:

$3

`bash
src/
assets/
stylesheets/
entrypoints/
entrypoint1.js
entrypoint2.js
nested/
nested-entrypoint.js
javascript/
web_modules/
|- react
`

$3

`bash
build/
chunks/
react-hash.chunk.js

entrypoints/
entrypoint1-hash.js
entrypoint2-hash.js
nested/
nested-entrypoint-hash.js

css/
entrypoints/
# 1 css file per entrypoint
entrypoint1-hash.css
entrypoint2-hash.css
nested/
nested-entrypoint-hash.css

assets/
asset1-hash.png
asset2-hash.jpg

manifest.json # A manifest of all file locations
`

Note: CSS files with correspond with an entrypoint file and will not
maintain your naming from a stylesheets directory.

Developing locally

`bash
git clone https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle
cd snowpack-plugin-rollup-bundle
yarn install
yarn build
`




$3

`bash
cd __tests__/example_dir
yarn install
yarn snowpack build
`

Then you must manually copy the HTML file from the src/ directory
and then fix the entrypoint route to the hashed version. You must
also add in the generated CSS file.

Then you can run:

`bash
yarn servor build
`

Then navigate to localhost:8080 to see the final build.

Testing

`bash
git clone https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle/tree/development/
cd snowpack-plugin-rollup-bundle
yarn install
yarn build && yarn test
`

You can then view the generated build in the __tests__/example_dir/build directory.

Roadmap

- [x] Change hashing from x.hash.ext to x-hash.ext

- [x] Cypress testing to ensure build and dev work the same

- [x] Support emitting HTML files with proper