I know everyone's into Eleventy these days but I dislike it. It reminds me of WebPack; too configuration heavy.

I always liked #ParcelJS but they took too long getting to v2 and now nobody ever talks about it.

Are there any other #staticSiteGenerator tools I should checkout?

I mainly just want #HTML #templating, but I'd like to avoid template languages like Mustache and Liquid for PTSD reasons.

Bonus points if it I can use the same files in the browser.

#webDev #javaScript #build #ssg

Parcel v2.12.0

Parcel v2.12.0 introduces support for macros, which enable you to generate code at build time using regular JavaScript functions. It also includes a new online REPL, improves our CSS bundling support, adds configuration options to fine tune your app's code splitting, and improves performance and memory usage.

29: #parceljs - "A web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration."

What are some tools that can take a plain vanilla ES Module web app and optimize it (f.e. read the importmap, download scripts from CDNs, minify everything into an HTML file with minified and bundled JS file)?

#ParcelJS comes to mind (does it do that?) Anything else?

Release v2.10.0 · parcel-bundler/parcel

Parcel v2.10.0 includes big performance improvements, an improved --lazy mode, reduced runtime bundle sizes, web extension improvements, and tons of bug fixes and improvements. Added Core Add su...

GitHub
Parcel v2.9.0: package exports, ESM-based plugins and configs, incremental symbol propagation and more
https://parceljs.org/blog/v2-9-0/
#ES_Next_News #ECMAScript #JavaScript #ParcelJS
Parcel v2.9.0

Parcel v2.9.0 includes many long requested features, including a brand new resolver with support for package.json "exports" and tsconfig.json features, support for ESM plugins and configs, and local Parcel plugins. It also improves performance with a new default JS minifier powered by SWC, incremental symbol propagation, and improved bundler data structures, and includes a new build performance tracing feature. This is a big release – let's dive in!

I now have 2 #JavaScript projects in which the scope hoisting https://parceljs.org/features/scope-hoisting/ feature of #ParcelJS is removing most of my own code and some imports from the production bundle.
The dev build via „watch“ is always working fine.

I now disable the feature every time I run into this issue…
Tree shaking seems to work still but this affects performance maybe a tiny bit.

Here is also the related issue https://github.com/parcel-bundler/parcel/issues/8792

#WebDev

Scope hoisting

In production builds, Parcel concatenates modules into a single scope. This is called "scope hoisting". Parcel also statically analyzes the imports and exports of each module, and removes everything that isn't used. This is called "tree shaking".

Welp, having spun two small Typescript libraries off of #xinjs and build a tiny one from scratch, and published them to npm, in the last few days—all using #parceljs—I finally felt I had facepalmed enough times to switch #xinjs over to building dist/ and cdn/ targets with parceljs. I guess I'll find out tomorrow if I've blown anything up.
There's a lot of reasons to like #parceljs but if there's one I'd pick over the others, it's eliminating the need to deal with multiple tsconfigs. If I weren't using ts-standard I wouldn't need to deal with ts-config at all.

#parceljs is amazingly convenient and easy to use but I built a tiny library (random-I’d-base36) from a 4kB Javascript source file with no dependencies and it produced a 9kB file?!. Everything now has a giant name composed of random strings and $ signs. Like WTF?

So I tried #rollupjs and got better results without actually minifying.

Eventually I discovered that you need a little more configuration in #parceljs but now the only actual small file is neither module nor main…

#javascript