https://github.com/aelbore/esm-cjs-lib-example

Example code how to publish ESM and CJS backward compatible package
https://github.com/aelbore/esm-cjs-lib-example

esm ts-node typescript

Last synced: 3 months ago
JSON representation

Example code how to publish ESM and CJS backward compatible package

• Host: GitHub
• URL: https://github.com/aelbore/esm-cjs-lib-example
• Owner: aelbore
• Created: 2020-06-05T09:01:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-05T13:50:07.000Z (about 6 years ago)
• Last Synced: 2025-02-12T14:58:46.888Z (over 1 year ago)
• Topics: esm, ts-node, typescript
• Language: JavaScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# esm-cjs-lib-example

Example code how to publish ESM and CJS backward compatible package

Pre-requisite

-----

`ts-esm` loader for javascript es module and typescript

  ```

  npm install ts-esm --dev

  ```

## Structure

* `./packages/my-lib-example` 

  - this is the hybrid backward compatibility, with [conditional exports](https://nodejs.org/api/esm.html#esm_conditional_exports)

  - `yarn build.lib` to create package for hybrid package

    - output structure

      ```

       ./dist/my-lib-example/

        cjs/

          my-lib.js

          package.json

        my-lib.d.ts

        my-lib.js

        package.json

      ```

    - `./dist/my-lib-example/cjs/package.json`

      - this will indicate that `.js` file is `commonjs` file

      - all the `.js` file with the same directory of `package.json` would treat as `commonjs`

      ```json

      {

        "type": "commonjs"

      }

      ```

    - `./dist/my-lib-example/package.json`

      - `main` entry point for commonjs, this property can be overriden by `exports`

      - `exports` property has `require` for commonjs entry point `import` for es module entry point

      - `module` is for bundler, if `module` is not present bundler gets `main` entry point

      - `type` property indicates that all `.js` file treat as `es` module 

        ```json

        {

          "name": "my-package-example",

          "version": "0.0.1",

          "type": "module",

          "main": "./my-lib.js",

          "module": "./my-lib.js",

          "exports": {

            "require": "./cjs/my-lib.js",

            "import": "./my-lib.js"

          },

          "typings": "./my-lib.d.ts"

        }

        ```