NPM (New) Package.json Exports Field

NPM (New) Package.json Exports Field

NPM (New) Package.json Exports Field. Heard about export map? The exports field (or “export map”) provides a way to expose your package modules for different environments and JavaScript flavors WHILE restricting access to its internal parts.

The documentation for the exports package.json field is here, it comes from this proposal . I won’t cover everything, so check out the proposal if you need any additional information.

Plus I did not cover the mirror imports field that is very interesting in the ESModule world.

“Export” what ?

The exports field (or “export map”) provides a way to expose your package modules for different environments and JavaScript flavors WHILE restricting access to its internal parts.

  • Environments like NodeJS, browser, of even node-env-like filters production/development, for instance React could (or does ?) use it for its development build with warnings & stuff, and its production build.
  • Flavors like EcmaScript Module import … from '…' vs. CommonJS const … = require(…)

How to use it

Consider the following architecture:

my-awesome-lib
├── lib/
│   ├── whole-lib.browser.js (iife format)
│   ├── public-module-a.cjs  (commonjs format)
│   ├── public-module-a.mjs  (esmodule format)
│   ├── public-module-b.cjs
│   ├── public-module-b.mjs
│   └── internals/
│       ├── private-module-c.cjs
│       └── private-module-c.mjs
├── package.json
└── …

We want to export module-a and module-b while restricting access to module-c. We also want our package to provide CommonJS and ESModule outputs.

Here’s an example of how you could use that the benefits of the exports field:

{
  "name": "my-awesome-lib",
  …
  "exports": {
    ".": {
      "browser": {
        "default": "./lib/whole-lib.browser.js"
      }
    },
    "module-a": {
      "import": "./lib/public-module-a.mjs",
      "require": "./lib/public-module-a.cjs"
    },
    "module-b": {
      "import": "./lib/public-module-b.mjs",
      "require": "./lib/public-module-b.cjs"
    }
  }
}

package.json | export field usage

Note: every path should be relative to the package root. Meaning each path must start with _`./_`

By providing the following information about our package my-awesome-lib, we can now use it anywhere (it is supported) like this:

// CommonJS flavor
const moduleA = require('my-awesome-lib/module-a')

// ESModule flavor
import moduleA from 'my-awesome-lib/module-a'

// WON'T WORK!
const moduleA = require('my-awesome-lib/lib/public-module-a')
const moduleC = require('my-awesome-lib/internals/private-module-c')
import moduleA from 'my-awesome-lib/lib/public-module-a'
import moduleC from 'my-awesome-lib/internals/private-module-c'

JavaScript usage

In both flavors, notice the path rewrite: there’s no /lib/ in them. The path correspond to what we declared in the exports map.

npm javascript node programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

JavaScript Full Course - Beginner's Guide to JavaScript on Node.js

This complete 51-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript on Node.js. JavaScript Full Course - Beginner's Guide to JavaScript on Node.js

NODE.JS 15 – DAS IST ALLES NEU | Node.js 15 und npm 7 sind erschienen

NODE.JS 15 – DAS IST ALLES NEU | Node.js 15 und npm 7 sind erschienen. Node.js 15 ist erschienen – und Node.js 14 LTS kommt nächste Woche! Die neue Version enthält zahlreiche große und kleine Neuerungen, unter anderem in Bezug auf das Abbrechen von Promises, den Umgang mit Zeichenketten, die verwendete V8-Version, und vieles mehr. Außerdem enthält Node.js 15 die neue npm-Version 7. Was das alles im Detail bedeutet und wie Du am besten auf Node.js 15 aktualisierst, erfährst Du im Developer's Special in unserem Video.

A Beginner’s Guide to NPM, the Node Package Manager

What is NPM? NPM stands for Node Package Manager and is one of the multiple package managers available for the Javascript programming language. This article is a gentle introduction into what NPM is and what it does for you.