esm-to-plain-js

Simplistic string substitution to replace export with a globalThis assignment (CLI tool designed for use in npm package.json scripts)

esm-to-plain-js transforms an ES modules file into a plain JavaScript file for browsers by commenting out the imports and replacing the export statement wth globalThis assignments.  The command's console output includes a timestamp and formatting helpful in build systems.

A) Setup

Install package for node:

$ npm install --save-dev esm-to-plain-js

B) Usage

1. Synopsis

esm-to-plain-js [SOURCE] [TARGET]

Parameters:

• The first parameter is the source file.
• The second parameter is the target file or folder (use the --folder flag).

2. npm package.json scripts

Run esm-to-plain-js from the "scripts" section of your package.json file.

Example package.json script:

   "scripts": {
      "make-plain-js": "esm-to-plain-js --cd=build web-app.esm.js web-app.js"
   },

3. Command-line npx

Example terminal commands:

$ npm install --save-dev esm-to-plain-js
$ npx esm-to-plain-js web-app.esm.js web-app.js

You can also install esm-to-plain-js globally (--global) and then run it anywhere directly from the terminal.

4. CLI flags

Command-line flags: | Flag | Description | Values | | --------- | ---------------------------------------------- | ---------- | | --cd | Change working directory before starting copy. | string | | --note | Place to add a comment only for humans. | string | | --quiet | Suppress informational messages. | N/A |

5. Examples

• esm-to-plain-js --cd=build web-app.esm.js web-app.js Transforms build/web-app.esm.js to build/web-app.js

• esm-to-plain-js web-app.esm.js web-app.js --quiet Displays no output.

C) Application Code

Even though esm-to-plain-js is primarily intended for build scripts, the package can be used programmatically in ESM and TypeScript projects.

Example:

import { esmToPlainJs } from 'esm-to-plain-js';

const result =
   esmToPlainJs.transform('build/web-app.esm.js', 'build/web-app.js');

console.info('Execution time:', result.duration, 'ms');

See the TypeScript Declarations at the top of esm-to-plain-js.ts for documentation.

MIT License

See the runScriptsConfig section of package.json for a clean way to organize build tasks:

• 🎋 add-dist-header —  Prepend a one-line banner comment (with license notice) to distribution files
• 📄 copy-file-util —  Copy or rename a file with optional package version number
• 📂 copy-folder-util —  Recursively copy files from one folder to another folder
• 🪺 recursive-exec —  Run a command on each file in a folder and its subfolders
• 🔍 replacer-util —  Find and replace strings or template outputs in text files
• 🔢 rev-web-assets —  Revision web asset filenames with cache busting content hash fingerprints
• 🚆 run-scripts-util —  Organize npm package.json scripts into groups of easy-to-manage commands
• 🚦 w3c-html-validator —  Check the markup validity of HTML files using the W3C validator