Javascript bundling - Githubissues

mehulkar commented 2 years ago

This may be a bit heretical / anti-11ty philosophy, but is there an opinion on how to compile and serve javascript?

I want to add some dynamic portions to a website and so far have gotten away with inline <script> tags. But if I want to use a package (e.g. web-vitals) package, it's not clear how to do this. In one site I setup a separate rollup process, in another, I follow this approach with a JS template. Both are a bit convoluted, and I struggle to remember how it works when I come back to a project after some time.

Describe the solution you'd like This may be solved with some documentation, but some kind of high level philosophy of how to take scripts, bundle & minify them, and put a reference in <script src> elements on the page would be useful. It would be even more useful if the script could optionally be inlined.

pdehaan commented 2 years ago

Hhmm, I wonder if something like this would work (if you didn't want to use the CDN version of web-vitals):

const webVitalsPath = require.resolve("web-vitals");

module.exports = function (eleventyConfig) {
  // Copy the package's `main` file from node_modules into the site.
  eleventyConfig.addPassthroughCopy({[webVitalsPath]: "scripts/web-vitals.min.js"});

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

> DEBUG=Eleventy:TemplatePassthrough eleventy

  Eleventy:TemplatePassthrough Copying './node_modules/web-vitals/dist/web-vitals.umd.js' +0ms
  Eleventy:TemplatePassthrough Copying individual file 'node_modules/web-vitals/dist/web-vitals.umd.js' +13ms
[11ty] Copied 1 file / Wrote 1 file in 0.03 seconds (v1.0.1)

OUTPUT

tree www
www/
├── index.html
└── scripts/
    └── web-vitals.min.js

1 directory, 2 files

But yeah, to your larger issue. Some docs on using Eleventy w/ Rollup or Webpack or Vite would be useful. You could try making a PR in https://github.com/11ty/11ty-website or get it added to https://www.11ty.dev/docs/tutorials/

mehulkar commented 2 years ago

if you didn't want to use the CDN version of web-vitals

correct. also not sure this is good practice. same origin is usually going to be better than cdn?

eleventyConfig.addPassthroughCopy({[webVitalsPath]: "scripts/web-vitals.min.js"});

I guess this works, but I still need some glue code to use the exported functions from this, so my code would have to import and use somehow. So some setup is still required. And in the cases of packages/modules that don't provide a single built file, you're still out of luck, trying to handpick files out and then trying to build them.

Some docs on using Eleventy w/ Rollup or Webpack or Vite

@raresportan's approach in the blogpost works, but I wanted to check if there was anything better available!

You could try making a PR

Ok, i'll try it out!

pdehaan commented 2 years ago

Yeah, definitely got a bit tricky when I tried to use the module version of web-vitals, but this very simple version using './node_modules/web-vitals/dist/web-vitals.umd.js' seemed to work (although I agree probably not the greatest solution):

---
eleventyComputed:
  title: "{{ eleventy.generator}}"
---
<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{ title }}</title>
  <script src="/scripts/web-vitals.min.js"></script>
  <script>
    webVitals.getCLS(console.log, true);
    webVitals.getFID(console.log, true);
    webVitals.getLCP(console.log, true);
  </script>
</head>
<body>

  <h1>SUCCESS!</h1>
  <p>{{ eleventy.generator }}</p>

</body>
</html>

Snapstromegon commented 2 years ago

My take on this is to use rollup in combination with 11ty. I haven't made it into a plugin, since I'm still waiting for the official asset pipeline, but until then you can see my writeup of that solution here: https://www.hoeser.dev/blog/2021-02-28-11ty-and-rollup/

Snapstromegon commented 2 years ago

I finally tooke the time (partly thanks to this issue) and created eleventy-plugin-rollup. This might be helpful for some.

nhoizey commented 1 year ago

I guess there's a way to do it with https://github.com/11ty/eleventy-plugin-bundle but I didn't find any docs/tutorial for this specific need, examples are provided only with Sass support for CSS.

11ty / eleventy

Javascript bundling #2490

OUTPUT