Skip to content

A legacy minifier combination that can handles ES6 import/export style and script styles without breaking your codebase

License

Notifications You must be signed in to change notification settings

puka-tchou/sitting-duck

Repository files navigation

sitting-duck

npm bundle size install size codecov lint Depfu Snyk security rating

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 needs gradual modernization? Finding a bundler/minifier that handles antiquated script-style global-variable based code as well as contemporary ES6 import/export syntax and node_modules/ dependencies can be challenging. With sitting-duck, you don't have to pause your project's evolution to address these issues.

Getting Started

  1. 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`, // Your JS files
      `_test/*.css, !node_modules/, !**/*.min.css`, // Your CSS files
    );
  2. Install the necessary dependencies:

    npm i -D sitting-duck
    
  3. Update your package.json:

    {
      "scripts": {
        "dev": "node ./minify.mjs --dev",
        "build": "node ./minify.mjs"
      }
    }
  4. Execute the commands:

    npm run build
    npm run dev
    
  5. 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 the following 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 "./partial.css";

For more information, consult the esbuild docs: esbuild CSS Content Types

About This Project

The goals of this project are simple:

  1. Minify legacy files without breaking the code.
  2. Bundle and minify modern syntax.
  3. Streamline your codebase's modernization.

We adhere to the principle of "do not f*cking touch my code". We understand that sometimes things just work, and we respect that. This project won't impose arbitrary coding styles, conventions, or syntax changes. When dealing with large codebases, you don’t want unexpected transformations breaking your app.

To achieve this, we use:

  1. SWC to minify legacy files. SWC is known for its speed.
  2. esbuild to bundle dependencies and transform modern syntax to iife. esbuild is also fast.

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

About

A legacy minifier combination that can handles ES6 import/export style and script styles without breaking your codebase

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published