tsc: building two types of modules - es6 and commonjs

package.json

@@ -10,13 +10,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "main": "dist/cjs/src/index.js",
+  "types": "dist/esm/src/index.d.ts",
+  "module": "dist/esm/src/index.js",
   "files": [
     "dist"
   ],
-  "type": "commonjs",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "build": "rm -fr dist; npx tsc -b -verbose; npx webpack",
+    "build": "rm -rf dist && pnpm build:node && pnpm build:browser && pnpm webpack",
+    "build:node": " npx tsc -p tsconfig.cjs.json --noEmit false",
+    "build:browser": "npx tsc -p tsconfig.esm.json --noEmit false",
+    "build:types": "npx tsc -p tsconfig.types.json --noEmit false",
     "clean": "gts clean",
     "prepare": "husky install",
     "pretest": "pnpm lint",

tsconfig.cjs.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "module": "commonjs",
+    "target": "es6",
+    "outDir": "dist/cjs",
+  }
+}

tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "module": "es6",
+    "target": "es6",
+    "outDir": "dist/esm",
+  }
+}

tsconfig.json

@@ -1,13 +1,10 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "lib": ["es2021"],
-    "target": "ES6",
-    "module": "CommonJS",
+    "module": "es6",
     "rootDir": ".",
     "outDir": "./dist",
     "moduleResolution": "node",
-    "declaration": true,
     "sourceMap": true,
     "strict": true,
     "esModuleInterop": true,
@@ -16,5 +13,13 @@
     "experimentalDecorators": true,
     "resolveJsonModule": true
   },
+  "ts-node": {
+    // these options are overrides used only by ts-node
+    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  },
+  "include": ["./src/*"],
   "exclude": ["./dist", "./test"]
 }

webpack.config.js

@@ -2,14 +2,19 @@ const path = require('path')
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
-module.exports = {
+var config = {
   mode: 'production',
   entry: './src/index.ts',
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
-        use: 'ts-loader',
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            configFile: "tsconfig.esm.json"
+          },
+        }],
         exclude: /node_modules/,
       },
     ],
@@ -18,14 +23,8 @@ module.exports = {
     extensions: ['.ts', '.js', '.json'],
     fallback: {
       fs: false,
-    },
-  },
-  output: {
-    filename: 'marinade-ts-sdk.min.js',
-    path: path.resolve(__dirname, 'dist'),
-    library: {
-      name: 'MarinadeSdk',
-      type: 'this',
+      tls: false,
+      net: false,
     },
   },
   plugins: [new NodePolyfillPlugin()],
@@ -42,4 +41,34 @@ module.exports = {
       }),
     ],
   },
+  // devtool: 'source-map',
 }
+
+var outputEsm = Object.assign({}, config, {
+  experiments: {
+    outputModule: true,
+  },
+  target: 'es6',
+  output : {
+    filename: 'marinade-ts-sdk.esm.min.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: {
+      type: 'module',
+    },
+    chunkFormat: 'module',
+		module: true,
+  },
+})
+
+var outputCommonJs = Object.assign({}, config, {
+  output: {
+    filename: 'marinade-ts-sdk.cjs.min.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: {
+      name: 'MarinadeSdk',
+      type: 'commonjs',
+    },
+  }
+})
+
+module.exports = [outputCommonJs, outputEsm]