What is fesm2015 and how it relates to esm2015?

Question

I know that esm2015 refers to ecmascript modules described by the ecmascript 2015 specification (modules section)

In some libraries under node_modules/ I see, next to the directory esm2015/, another one called fesm2015/.

• What is fesm2015?
• Does it extend esm2015?
• Is there any specification describing it?

Answer 1

It's part of the Angular Package Format.

FESM - short for Flattened ES Modules and consists of a file format created by flattening all ES Modules accessible from an entry point into a single ES Module.

The specification appears to be in this google doc:

https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs

More info:

We strongly recommend that you optimize the build artifacts before publishing your build artifacts to npm, by flattening the ES Modules. This significantly reduces the build time of Angular applications as well as download and parse time of the final application bundle. Please check out the excellent post "The cost of small modules" by Nolan Lawson.

Angular compiler has support for generating index ES module files that can then be used to flattened module using tools like Rollup, resulting in a file format we call Flattened ES Module or FESM.

FESM is a file format created by flattening all ES Modules accessible from an entry point into a single ES Module. It’s formed by following all imports from a package and copying that code into a single file while preserving all public ES exports and removing all private imports.

The shortened name “FESM” (pronounced “phesom”) can have a number after it such as “FESM5” or “FESM2015”. The number refers to the language level of the JavaScript inside the module. So a FESM5 file would be ESM+ES5 (import/export statements and ES5 source code).

To generate a flattened ES Module index file, use the following configuration options in your tsconfig.json file:

{   "compilerOptions": {
     ...
     "module": "es2015",
     "target": "es2015",
     ...   },   "angularCompilerOptions": {
     ...
     "flatModuleOutFile": "my-ui-lib.js",
     "flatModuleId": "my-ui-lib"   } }

Once the index file (e.g. my-ui-lib.js) is generated by ngc, bundlers and optimizers like Rollup can be used to produce the flattened ESM file.