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.
-
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 );
-
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
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
The goals of this project are simple:
- Minify legacy files without breaking the code.
- Bundle and minify modern syntax.
- 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:
- SWC to minify legacy files. SWC is known for its speed.
- 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.