sitting-duck

simplify the modernization of your legacy project by combining a minifier capable of handling both ES6 import/export syntax and outdated script-style global-variable based code.

are you managing a legacy project that's in need of gradual modernization? Achieving that goal is commendable, but finding a bundler/minifier that seamlessly handles antiquated script-style global-variable based code as well as contemporary ES6 import/export syntax and node_modules/ dependencies can be daunting. You shouldn't have to put your project's evolution on hold for weeks to untangle this mess.

getting started

create a file named minify.mjs:

import minify from "sitting-duck";

// You can either pass a string that will be interpreted as a glob pattern by globby or an array of files.
minify(
  `_test/*.js, !node_modules/, !**/*.min.js`, // These would be your JS files
  `_test/*.css, !node_modules/, !**/*.min.css`, // Here are your CSS files
);

install the necessary dependencies:

npm i -D sitting-duck

update your package.json:

{
  "scripts": {
    "dev": "node ./minify.mjs --dev",
    "build": "node ./minify.mjs"
  }
}

execute the commands:

npm run build
npm run dev

optionally, update your .gitignore:

*.min.js
*.min.js.map
*.min.css
*.min.css.map
*.LEGAL.txt

using import/exports with the // @MODULE annotation

when importing a module from node_modules/, add this line at the very beginning of the file:

// @MODULE

see the _test/module.js file for an example:

// @MODULE
import distance from "@turf/distance";
import { point } from "@turf/helpers";

const testModule = () => {
  const from = point([-75.343, 39.984]);
  const to = point([-75.534, 39.123]);
  const options = { units: "miles" };

  return distance(from, to, options);
};

export { testModule };

CSS files are also bundled and minified using esbuild, supporting syntax like:

@import "./parial.css";

for more information, consult the esbuild docs: https://esbuild.github.io/content-types/#css

about this project

the objectives of this project are pretty straightforward:

1. minify legacy files without breaking the code
2. bundle and minify modern syntax
3. streamline your codebase's modernization.

To do this, we use a simple concept: do not f*cking touch my code.

Sometimes, things just work. I understand and respect that and this project won't force you to use an arbitrary coding style, convention or syntax. When you're working on 10 000+ lines long files, you do not want your bundler to transform your code and unexpectedly break your app.

As a result of this philosophy, we use a combination of tools:

1. swc to minify the legacy files. swc is fast, very fast.
2. esbuild to bundle the dependencies and transform the modern syntax to iife. esbuild is fast as well.

the files generated are saved at the side of the original ones and can be used in place of the originals.