modified build commands

Author: s5nw

.gitignore

@@ -2,6 +2,4 @@
 .DS_Store
 node_modules
 
-lib
-lib-esm
-_bundles
+dist

package.json

@@ -1,25 +1,41 @@
 {
-  "name": "icon-element",
-  "version": "1.0.0",
-  "description": "SVG icon system utilising a custom element",
-  "repository": "[email protected]:s5nw/svg-icon-system.git",
-  "author": "Stephan Weber <[email protected]>",
-  "license": "MIT",
-  "private": true,
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
-    "eslint": "^7.9.0",
-    "eslint-config-bestit-base": "^1.0.0",
-    "shx": "^0.3.3",
-    "ts-loader": "^9.2.2",
-    "typescript": "^4.3.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0"
-  },
-  "scripts": {
-    "clean": "shx rm -rf _bundles lib lib-esm",
-    "build": "npm run clean && tsc && tsc -m es6 --outDir lib-esm && webpack --mode=production"
-  },
-  "dependencies": {}
+    "name": "icon-element",
+    "version": "1.0.0",
+    "description": "SVG icon system utilising a custom element",
+    "repository": "[email protected]:s5nw/svg-icon-system.git",
+    "author": "Stephan Weber <[email protected]>",
+    "license": "MIT",
+    "private": true,
+    "main": "./dist/commonjs/index.js",
+    "module": "./dist/esm/index.js",
+    "type": "module",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/commonjs/index.js",
+        "default": "./dist/commonjs/index.js"
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.2.0",
+        "@typescript-eslint/parser": "^4.2.0",
+        "eslint": "^7.9.0",
+        "eslint-config-bestit-base": "^1.0.0",
+        "shx": "^0.3.3",
+        "ts-loader": "^9.2.2",
+        "typescript": "^4.3.2",
+        "webpack": "^5.38.1",
+        "webpack-cli": "^4.7.0"
+    },
+    "scripts": {
+        "clean": "shx rm -rf dist",
+        "build": "yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd",
+        "build:declaration": "tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true",
+        "build:esm": "tsc --module es2015 --target es6 --outDir dist/esm",
+        "build:commonjs": "tsc --module commonjs --target es6 --outDir dist/commonjs",
+        "build:umd": "webpack --mode=production"
+    },
+    "dependencies": {}
 }

public/index.html

@@ -228,7 +228,7 @@ <h2>Storyblok element</h2>
             </section>
         </div>
 
-        <script src="../_bundles/icon-element.js"></script>
+        <script src="../dist/umd/icon-element.js"></script>
         <script type="text/javascript">
             // Create a custom icon element with the desired name
             IconElement.IconService.createElement(

tsconfig.json

@@ -1,19 +1,20 @@
 {
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "module": "commonjs",
-    "target": "es6",
-    "lib": [ "es6", "dom" ],
-    "outDir": "lib",
-    "allowSyntheticDefaultImports": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "forceConsistentCasingInFileNames": true,
-    "sourceMap": true,
-    "declaration": true,
-  },
-  "files": [
-    "./src/index.ts"
-  ],
-  "compileOnSave": false,
-  "buildOnSave": false
-}
+    "compilerOptions": {
+        "moduleResolution": "node",
+        "module": "es6",
+        "target": "es6",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "outDir": "dist",
+        "forceConsistentCasingInFileNames": true,
+        "sourceMap": true,
+        "declaration": false,
+    },
+    "files": [
+        "./src/index.ts"
+    ],
+    "compileOnSave": false,
+    "buildOnSave": false
+}

webpack.config.js

@@ -1,12 +1,9 @@
-'use strict';
-
-/* eslint-env node */
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
+import { resolve as _resolve } from 'path';
+import TerserPlugin from 'terser-webpack-plugin';
 
 const PATHS = {
     entryPoint: './src/index.ts',
-    bundles: path.resolve(__dirname, '_bundles'),
+    bundles: _resolve('./dist/umd'),
 };
 
 const config = {
@@ -60,11 +57,20 @@ const config = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: 'ts-loader',
+                use: [
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            compilerOptions: {
+                                declaration: false,
+                            },
+                        }
+                    }
+                ],
                 exclude: /node_modules/,
             },
         ],
     },
 };
 
-module.exports = config;
+export default config;