Rolling (up) a multi module system (esm, cjs...) compatible npm library with TypeScript and Babel

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Babel (Formerly 6to5)

    🐠 Babel is a compiler for writing next generation JavaScript.

  • At the time of writing, source maps seem not to be generated when configured in .babelrc which is why --source-maps has been added. Running the scripts gives the following result:

  • node-module-esm

    Example repository for rollup based, esm enabled node modules

  • Example Library Run npm install Run npm build

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • node-module-esm-test

    Example repository for testing/integrating node-module-esm

  • To test the example library locally I have created a separate "testing repository". The setup and link procedure is as follows:

  • plugins

    🍣 The one-stop shop for official Rollup plugins (by rollup)

  • @rollup/plugin-babel: Triggers the transpile step through Babel (basically what we have done by means of the babel-cli for the unbundled versions). As we are using babel only for the bundled artifacts babelHelpers are set to bundled, so in case any helpers are needed these are added to the bundle file (you can read more about the property in the documentation). In include and extensions the files and their extensions (ts/js for the example library) to process are defined, whereasexcludes indicates folders/patterns which should be skipped (just the node_modules folder for the example library).

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts