feat: build ESM module and use in examples (#87)

* chore: ignore dist files from prettier * feat: build crunker additionally as an ESM module * feat: use ESM module in examples * chore: bump JS dependencies * chore: format * chore: bump version
jaggad · Jan 31, 2023 · d41c2ad · d41c2ad
1 parent a0e5d4a
commit d41c2ad
Show file tree

Hide file tree

Showing 10 changed files with 2,765 additions and 2,769 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
 .yarn
+dist
diff --git a/.yarn/releases/yarn-3.1.1.cjs b/.yarn/releases/yarn-3.1.1.cjs
diff --git a/.yarn/releases/yarn-3.3.1.cjs b/.yarn/releases/yarn-3.3.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
 
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs
diff --git a/examples/client/beatBuilder.html b/examples/client/beatBuilder.html
@@ -2,8 +2,9 @@
 <html lang="en">
   <head>
     <title>Crunker - Beat machine example</title>
-    <script src="https://unpkg.com/crunker@latest/dist/crunker.js"></script>
-    <script type="text/javascript">
+    <script type="module">
+      import Crunker from 'https://unpkg.com/crunker@latest/dist/crunker.esm.js';
+
       const mergeOneLine = async (crunker, buffer, times) => {
         const audios = times.map((t) => crunker.padAudio(buffer, 0, t));
         return crunker.mergeAudio(audios);

diff --git a/examples/client/index.html b/examples/client/index.html
@@ -11,7 +11,6 @@
         align-items: start;
       }
     </style>
-    <script src="https://unpkg.com/crunker@latest/dist/crunker.js"></script>
   </head>
   <body>
     <form>
@@ -23,7 +22,9 @@
       </div>
     </form>
 
-    <script>
+    <script type="module">
+      import Crunker from 'https://unpkg.com/crunker@latest/dist/crunker.esm.js';
+
       document.querySelector('form').addEventListener('submit', (e) => e.preventDefault());
 
       const inputSampleRate = document.querySelector('input[name=sampleRate]'),

diff --git a/examples/server/index.html b/examples/server/index.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Audio from Server - Crunker Example</title>
-    <script src="https://unpkg.com/crunker@latest/dist/crunker.js"></script>
   </head>
   <body>
     <button onclick="handleMerge()">Merge</button>
     <button onclick="handleConcat()">Concat</button>
 
-    <script>
+    <script type="module">
+      import Crunker from 'https://unpkg.com/crunker@latest/dist/crunker.esm.js';
+
       const sampleRate = 48000,
         audioPaths = ['./1.mp3', './2.mp3'];
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crunker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Simple way to merge or concatenate audio files with the Web Audio API.",
   "main": "dist/crunker.js",
   "types": "dist/crunker.d.ts",
@@ -13,7 +13,9 @@
     "type-check:watch": "yarn run type-check -- --watch",
     "build": "yarn run build:prod && yarn run build:types",
     "build:test": "webpack --config webpack.test.config.js --mode development",
-    "build:prod": "webpack --config webpack.config.js --mode production",
+    "build:prod": "yarn run build:prod:cjs && yarn run build:prod:esm",
+    "build:prod:cjs": "webpack --config webpack.config.js --mode production",
+    "build:prod:esm": "webpack --config webpack.esm.config.js --mode production",
     "build:types": "tsc --emitDeclarationOnly",
     "prepublishOnly": "yarn run build",
     "format": "prettier --write .",
@@ -40,26 +42,26 @@
   },
   "homepage": "https://github.com/jaggad/crunker#readme",
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
-    "babel-loader": "^8.2.3",
-    "babel-minify": "^0.5.1",
-    "chai": "^4.3.6",
-    "karma": "^6.3.12",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "babel-loader": "^8.3.0",
+    "babel-minify": "^0.5.2",
+    "chai": "^4.3.7",
+    "karma": "^6.4.1",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^3.1.0",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-mocha": "^2.0.1",
-    "mocha": "^9.2.0",
-    "prettier": "^2.5.1",
-    "terser-webpack-plugin": "^5.3.0",
-    "typescript": "^4.5.5",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.9.2"
+    "mocha": "^9.2.2",
+    "prettier": "^2.8.3",
+    "terser-webpack-plugin": "^5.3.6",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@3.3.1"
 }
diff --git a/webpack.esm.config.js b/webpack.esm.config.js
@@ -0,0 +1,16 @@
+const config = require('./webpack.config.js');
+
+config.experiments = {
+  outputModule: true,
+};
+
+config.output = {
+  path: __dirname + '/dist',
+  filename: 'crunker.esm.js',
+  module: true,
+  library: {
+    type: 'module',
+  },
+};
+
+module.exports = config;