how-to-publish-esm-to-npm v0.1.1

How to publish an ESM to NPM

mkdir name-of-the-package
cd ./name-of-the-package

npm init -y

npm install rollup rollup-plugin-copy rollup-plugin-dts typescript --save-dev

in ./package.json specify the right version of the package by following semantic versioning rules.

{
  "name": "name-of-the-package",
  "version": "0.1.9",
  "type": "module",
  "typings": "dist/index.d.ts",
  "module": "dist/esm/index.js",
  "main": "dist/esm/index.js",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^2.75.7",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^4.2.2",
    "typescript": "^4.7.4"
  },
  "files": [
    "dist"
  ]
}

Create the bundler config file:

touch rollup.config.js 

and paste

import dts from 'rollup-plugin-dts'
import copy from 'rollup-plugin-copy'

export default [
  {
    input: './src/index.js',
    plugins: [
     /* copy({
        targets: [
          { src: './package.json', dest: 'dist' }
        ]
      }),*/
      
    ],
    output: [
      { format: 'es',  file: './dist/esm/index.js' },
      { format: 'cjs', file: './dist/cjs/index.js' }
    ]
  },
  {
    input: './src/index.js',
    plugins: [ dts() ],
    output: {
      format: 'es',
      file: './dist/index.d.ts'
    }
  }
]

Build the project by running :

npm run build

Before publishing, the user must be logged in. If it's not the case, then :

npm login

The user is invited to enter username password and email. Once logged in we can start the publication with :

npm publish

you can check all the published versions of the package with :

npm view name-of-the-package versions

The last version is:

npm view name-of-the-package version