deploy package to npm with toplevel import

Question

I am trying to publish a package to npm but having trouble achieving the desired usage. My project builds the files in a dist folder and when I do an npm publish it "works" but in order to use it I have to do:

import Something from 'package/dist';

But I want to be able to just import from the package itself like:

import Something from 'package';

In my package.json I have the following config:

{
  "source": "src/index.js",
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build",
  }
}

I have tried copying the package.json into the dist folder after building and running npm publish from the dist folder but then the source is wrong (should be just index.js and not src/index.js) but if I have just index.js it will not build. It seems like most packages let you import from the top level directly (for example you can import React from 'react';) I don't know what else to include in this question but I am happy to update with more info if required.

Answer 1

Add this to package.json

   "exports": {
     ".": "./dist/index.js",
     "./*": "./dist/*.js"
   }

The exports field allows you to redefine paths to point to files or directories.