gem-hunter
Language: JavaScript
Allows an integrated usage of 11ty with rollup
Provide an integrated way to use rollup with eleventy.
This is based on my original blogpost about 11ty and rollup.
The benefit of this plugin is, that the resulting page will only load the JS it needs and parts of your bundle can be shared between pages. This is because rollup and 11ty no longer run independently from each other, but rollup knows what happens in 11ty.
npm i -D eleventy-plugin-rollup rollup
const rollupPlugin = require('eleventy-plugin-rollup'); module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(rollupPlugin, { rollupOptions: { output: { format: 'es', dir: '_site/js', }, }, }); // ... };
const rollupPlugin = require('eleventy-plugin-rollup'); module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(rollupPlugin, { rollupOptions: 'rollup.config.js', }); // ... };
{% rollup "assets/js/some.js" | url %}| Name | Default | Description |
|---|---|---|
| shortcode | rollup | Rollup Plugin shortcode name to use in templates (async shortcode required!) |
| rollupOptions | - | Your rollup config (either a valid rollup config option or a file path to a rollup config - can only include one config) |
| resolveName | default name with hash | Lets you overwrite how the resulting bundles are called. |
| scriptGenerator | (file, eleventyInstance) => <script src="${file}" type="module"></script> |
Defines how the resulting script tag from the shortcode should work |
| importScriptsAbsoluteFrom | eleventyConfig.dir.output |
Base paths for absolute import. Only used if useAbsoluteScriptPaths is true. |
| useAbsoluteScriptPaths | false | If true, all scripts will use an absolute path for imports. |
If you run a serverless setup, you have to do one of two things to get this plugin to work:
Since the default entrypoint naming function uses the content of the js file, it needs to be available at function execution time. You can copy the files like this:
eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, { name: 'possum', // The serverless function name from your permalink object functionsDir: './netlify/functions/', copy: ['path/to/your/js/files/'], });
If you set the resolveName option of this plugin, you can avoid copying over the js files.
The example below shows a function that only hashes the file path. Be aware that the hash won't change if you change the content of the file.
eleventyConfig.addPlugin(rollupPlugin, { rollupOptions: { /* ... */ }, resolveName: (path) => { const crypto = require('crypto'); const hash = crypto.createHash('sha256'); hash.update(resolvedPath); const fileHash = hash.digest('hex'); const parsedPath = path.parse(resolvedPath); return `${parsedPath.name}-${fileHash.substr(0, 6)}.js`; }, });
You have to provide some kind of rollup config since there is no default provided at the moment
You can't define multiple bundles/configurations inside your rollup config, since we wouldn't know which one to use as the plugin. But you can use multiple instances of the plugin.
If you call this plugin with file "a.js" which in turn imports file "b.js" and you change the content of file "b.js", the hash of "a.js" will remain the same. This is done, because not all templating languages support async shortcodes and we need the filename before actually running rollup.
We currently rely on nodejs modules and therewfore don't support Deno, which is required for Netlify Edge Functions.
The recommended way of watching is adding your dependencies as a watch target to eleventy like this:
// .eleventy.js module.exports = function (eleventyConfig) { eleventyConfig.addWatchTarget('src/js/'); };
If this doesn't work for you, this plugin does a best-effort approach to parsing rollup.watch.include and adding those targets automatically to the elventy watch targets. Please note that this isn't perfect and differs from the rollup behavior and does not support exclusions.