{"id":22808965,"url":"https://github.com/morganney/babel-dual-package","last_synced_at":"2025-04-22T13:24:58.491Z","repository":{"id":181131707,"uuid":"666285879","full_name":"morganney/babel-dual-package","owner":"morganney","description":"Node CLI for building a dual ESM and CJS package with Babel.","archived":false,"fork":false,"pushed_at":"2025-03-20T17:02:27.000Z","size":343,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T15:34:31.263Z","etag":null,"topics":["babel","cjs","dualpackage","esm","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morganney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-07-14T06:28:57.000Z","updated_at":"2025-03-19T02:37:50.000Z","dependencies_parsed_at":"2024-01-26T21:34:48.728Z","dependency_job_id":null,"html_url":"https://github.com/morganney/babel-dual-package","commit_stats":null,"previous_names":["morganney/babel-dual-package"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fbabel-dual-package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fbabel-dual-package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fbabel-dual-package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fbabel-dual-package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morganney","download_url":"https://codeload.github.com/morganney/babel-dual-package/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250247146,"owners_count":21399019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","cjs","dualpackage","esm","nodejs","typescript"],"created_at":"2024-12-12T11:13:01.028Z","updated_at":"2025-04-22T13:24:58.469Z","avatar_url":"https://github.com/morganney.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [`babel-dual-package`](https://www.npmjs.com/package/babel-dual-package)\n\n![CI](https://github.com/morganney/babel-dual-package/actions/workflows/ci.yml/badge.svg)\n[![codecov](https://codecov.io/gh/morganney/babel-dual-package/branch/main/graph/badge.svg?token=M76U9KTGAU)](https://codecov.io/gh/morganney/babel-dual-package)\n[![NPM version](https://img.shields.io/npm/v/babel-dual-package.svg)](https://www.npmjs.com/package/babel-dual-package)\n\nCLI for building a [dual ESM and CJS package](https://nodejs.org/api/packages.html#dual-commonjses-module-packages) with Babel. Takes an ES module and produces a compiled ESM and CJS build using the configuration from your `babel.config.json` file.\n\n## Requirements\n\n* Node \u003e= 16.19.0.\n* Your package uses `\"type\": \"module\"` in package.json.\n\n## Getting Started\n\nFirst install `babel-dual-package`:\n\n```console\nnpm install babel-dual-package\n```\n\nNext write your `babel.config.json` file and include any plugins or presets your project requires.\n\n```json\n{\n  \"presets\": [\n    [\"@babel/preset-env\", {\n      \"modules\": false\n    }]\n  ]\n}\n```\n\nNow run `babel-dual-package src` to get an ESM and CJS build in a `dist` directory that can be used as `exports` in a package.json file.\n\nRun `babel-dual-package --help` to see a list of more [options](#options).\n\n## Examples\n\n### TypeScript and JSX\n\nIf your project is using typescript then add `@babel/preset-typescript`. If it is also using JSX, then add `@babel/preset-react`.\n\n**babel.config.json**\n```json\n{\n  \"presets\": [\n    [\"@babel/preset-env\", {\n      \"modules\": false\n    }],\n    \"@babel/preset-typescript\"\n    [\"@babel/preset-react\", {\n      \"runtime\": \"automatic\"\n    }]\n  ]\n}\n```\n\nSet the `declarationDir` for your types to the same value used for `--out-dir`, or `dist` (the default) if not using `--out-dir`.\n\n**tsconfig.json**\n```json\n{\n  \"compilerOptions\": {\n    \"declaration\": true,\n    \"declarationDir\": \"dist\",\n    \"emitDeclarationOnly\": true,\n    \"isolatedModules\": true,\n    \"strict\": true\n  },\n  \"include\": [\"src\"]\n}\n```\n\nIn order to support typescript, you must pass the `--extensions` used:\n\n```console\nbabel-dual-package --out-dir dist --extensions .ts,.tsx src\n```\n\nIf everything worked you should get an ESM build in `dist` and a CJS build in `dist/cjs` with extensions in filenames and specifiers updated correctly.\n\nNow you can add some scripts to your package.json file to help automate the build during CI/CD.\n\n**package.json**\n```json\n  \"type\": \"module\",\n  \"scripts\": {\n    \"build:types\": \"tsc --emitDeclarationOnly\",\n    \"build:dual\": \"babel-dual-package --out-dir dist --extensions .ts,.tsx src\",\n    \"build\": \"npm run build:types \u0026\u0026 npm run build:dual\"\n  }\n```\n\n### Flat build\n\nGiven a directory structure like the following,\n\n```\napp/\n  package.json\n  src/\n    one/\n      file1.js\n    two/\n      file2.js\n    file.js\n```\n\nand by using `--out-file-extension` to make sure each build has unique filenames, you can create a flat build while still supporting conditional exports.\n\nFor example, running\n\n```console\nbabel-dual-package --no-cjs-dir --out-file-extension esm:.esm.js,cjs:.cjs.js src/*.js src/one src/two\n```\n\nWill produce the following build output:\n\n```\ndist/\n  file.esm.js\n  file.cjs.js\n  file1.esm.js,\n  file1.cjs.js,\n  file2.esm.js,\n  file2.cjs.js\n```\n\n### Import query parameters\n\nYou can run a build by importing this package and passing an `args` [query parameter in the import specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta#passing_query_parameters). Boolean [options](#options) like `--no-cjs-dir` should have an empty string as their value (`''`), and instead of positional arguments, you pass a `files` array ([globs](https://github.com/isaacs/node-glob) supported).\n\n**build.js**\n```js\nawait import(\n  `./node_modules/.bin/babel-dual-package?args=${encodeURIComponent(\n    JSON.stringify({\n      '--out-dir': 'dist',\n      '--extensions': '.ts',\n      '--no-cjs-dir': '',\n      files: ['src/*.js']\n    })\n  )}`\n)\n```\n\n## Options\n\nThere are options that can be passed to provide custom output locations, file extensions, and more.\n\nYou can run `babel-dual-package --help` to get more info. Below is the output of that:\n\n```console\nuser@comp ~ $ ./node_modules/.bin/babel-dual-package --help\nUsage: babel-dual-package [options] \u003cfiles ...\u003e\n\nOptions:\n--out-dir [out] \t\t Compile the modules in \u003cfiles ...\u003e into an output directory.\n--root-mode [mode] \t\t The project-root resolution mode. One of 'root' (the default), 'upward', or 'upward-optional'.\n--cjs-dir-name [string] \t The name of the --out-dir subdirectory to output the CJS build. [cjs]\n--extensions [extensions] \t List of extensions to compile when a directory is part of the \u003cfiles ...\u003e input. [.js,.jsx,.mjs,.cjs]\n--out-file-extension [extmap] \t Use a specific extension for esm/cjs files. [esm:.js,cjs:.cjs]\n--keep-file-extension \t\t Preserve the file extensions of the input files.\n--no-cjs-dir \t\t\t Do not create a subdirectory for the CJS build in --out-dir.\n--no-comments \t\t\t Remove comments from generated code.\n--source-maps \t\t\t Generate an external source map.\n--minified  \t\t\t Save as many bytes when printing (false by default).\n--copy-files \t\t\t When compiling a directory copy over non-compilable files.\n--help \t\t\t\t Output usage information (this information).\n```\n\n## Questions\n\n**Q** Can I use `\"type\": \"commonjs\"` in my package.json file, or just not include the field?\n\n**A** No. Converting from CJS to ESM is a codemod, not transpiling via Babel.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Fbabel-dual-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganney%2Fbabel-dual-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Fbabel-dual-package/lists"}