Convert build packager to rollup

Add an es module target

#2910

.eslintrc.js

@@ -20,7 +20,6 @@ module.exports = {
   // see https://github.com/standard/eslint-config-standard
   // 'prettier' (https://github.com/prettier/eslint-config-prettier) must be last
   extends: ['eslint:recommended', 'prettier'],
-  ignorePatterns: ['/src/demux/webworkify-webpack.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     sourceType: 'module',

.prettierignore

@@ -5,5 +5,4 @@
 /demo/libs
 /dist
 /lib
-/src/demux/webworkify-webpack.js
 package-lock.json

README.md

@@ -19,7 +19,7 @@ HLS.js works directly on top of a standard HTML`<video>` element.
 
 HLS.js is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly typed superset of ES6), and transpiled in ECMAScript5 using [Babel](https://babeljs.io/) and the [TypeScript compiler].
 
-[Webpack] is used to build the distro bundle and serve the local development environment.
+[Rollup] is used to build the distro bundle and serve the local development environment.
 
 [html5 video]: https://www.html5rocks.com/en/tutorials/video/basics/
 [mediasource extensions]: https://w3c.github.io/media-source/
@@ -28,7 +28,7 @@ HLS.js is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly
 [ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
 [typescript]: https://www.typescriptlang.org/
 [typescript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html
-[webpack]: https://webpack.js.org/
+[rollup]: https://rollupjs.org/
 
 ## Features
 
@@ -175,7 +175,7 @@ Only debug-mode artifacts:
 npm run build:debug
 ```
 
-Build and watch (customized dev setups where you'll want to host through another server than webpacks' - for example in a sub-module/project)
+Build and watch (customized dev setups where you'll want to host through another server - for example in a sub-module/project)
 
 ```
 npm run build:watch

docs/design.md

@@ -17,7 +17,7 @@ design idea is pretty simple :
 - all subsystems are instantiated by the Hls instance.
 - each subsystem heavily relies on events for internal/external communications.
 - Events are handled using [EventEmitter3](https://github.com/primus/eventemitter3)
-- bundled for the browser by [webpack](https://webpack.js.org/)
+- bundled for the browser by [rollup](https://rollupjs.org/)
 
 ## Code structure
 

karma.conf.js

@@ -1,40 +1,86 @@
-const { merge } = require('webpack-merge');
-const webpack = require('webpack');
-const webpackConfig = require('./webpack.config')({ debug: true })[0];
-delete webpackConfig.entry;
-delete webpackConfig.output;
-const karmaWebpack = {
-  devtool: 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.(ts|js)$/,
-        exclude: /(node_modules|tests)/,
-        enforce: 'post',
-        use: [
+/* global process:false */
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const babel = require('@rollup/plugin-babel').babel;
+const replace = require('@rollup/plugin-replace');
+
+const extensions = ['.ts', '.js'];
+
+const rollupPreprocessor = {
+  output: {
+    format: 'iife',
+    name: 'hlsjsunittests',
+    sourcemap: 'inline',
+  },
+  plugins: [
+    nodeResolve({
+      extensions,
+    }),
+    commonjs({
+      transformMixedEsModules: true,
+    }),
+    replace({
+      preventAssignment: true,
+      values: {
+        __VERSION__: JSON.stringify(''),
+        __USE_SUBTITLES__: JSON.stringify(true),
+        __USE_ALT_AUDIO__: JSON.stringify(true),
+        __USE_EME_DRM__: JSON.stringify(true),
+        __USE_CMCD__: JSON.stringify(true),
+        __USE_CONTENT_STEERING__: JSON.stringify(true),
+        __USE_VARIABLE_SUBSTITUTION__: JSON.stringify(true),
+      },
+    }),
+    babel({
+      extensions,
+      babelHelpers: 'bundled',
+      presets: [
+        [
+          '@babel/preset-typescript',
           {
-            loader: 'coverage-istanbul-loader',
-            options: {
-              esModules: true,
+            optimizeConstEnums: true,
+          },
+        ],
+        [
+          '@babel/preset-env',
+          {
+            loose: true,
+            modules: false,
+            targets: {
+              browsers: [
+                'chrome >= 47',
+                'firefox >= 51',
+                'safari >= 8',
+                'ios >= 8',
+                'android >= 4',
+              ],
             },
           },
         ],
-      },
-    ],
-  },
-  resolve: {
-    fallback: {
-      util: false,
-    },
-  },
+      ],
+      plugins: [
+        [
+          '@babel/plugin-proposal-class-properties',
+          {
+            loose: true,
+          },
+        ],
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-transform-object-assign',
+        '@babel/plugin-proposal-optional-chaining',
+      ],
+    }),
+  ],
 };
 
-// Remove coverage post-processor for JavaScript debugging when running `test:unit:debug`
-if (process.env.DEBUG_UNIT_TESTS) {
-  karmaWebpack.module.rules = [];
-}
+// Do not add coverage for JavaScript debugging when running `test:unit:debug`
+const preprocessors = {
+  './tests/index.js': ['rollup'],
+};
 
-const mergeConfig = merge(webpackConfig, karmaWebpack);
+if (!process.env.DEBUG_UNIT_TESTS) {
+  preprocessors['./src/**/*.ts'] = ['coverage'];
+}
 
 module.exports = function (config) {
   config.set({
@@ -43,7 +89,6 @@ module.exports = function (config) {
     frameworks: ['mocha', 'sinon-chai'],
 
     // list of files / patterns to load in the browser
-    // https://github.com/webpack-contrib/karma-webpack#alternative-usage
     files: [
       {
         pattern: 'tests/index.js',
@@ -56,22 +101,21 @@ module.exports = function (config) {
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    // node_modules must not be webpacked or else Karma will fail to load frameworks
-    preprocessors: {
-      'tests/index.js': ['webpack', 'sourcemap'],
-    },
+    preprocessors,
 
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['mocha', 'coverage-istanbul'],
+    reporters: ['mocha', 'coverage'],
 
-    coverageIstanbulReporter: {
-      reports: ['lcov', 'text-summary'],
-      fixWebpackSourcePaths: true,
+    coverageReporter: {
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text', subdir: '.' },
+      ],
     },
 
-    webpack: mergeConfig,
+    rollupPreprocessor,
 
     // web server port
     port: 9876,

package.json

@@ -12,21 +12,30 @@
     "url": "https://github.com/video-dev/hls.js/issues"
   },
   "main": "./dist/hls.js",
+  "module": "./dist/hls.esm.js",
   "types": "./dist/hls.js.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/hls.esm.js",
+      "require": "./dist/hls.js",
+      "types": "./dist/hls.js.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
+    "demo/**/*",
     "dist/**/*",
     "src/**/*"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "webpack --progress && npm run build:types",
-    "build:ci": "webpack && tsc --build tsconfig-lib.json && api-extractor run",
-    "build:debug": "webpack --progress --env debug --env demo",
-    "build:watch": "webpack --progress --env debug --env demo --watch",
+    "build": "rollup --config && npm run build:types",
+    "build:ci": "rollup --config && tsc --build tsconfig-lib.json && api-extractor run",
+    "build:debug": "rollup --config --env.debug --env.demo",
+    "build:watch": "rollup --config --env.debug --env.demo --watch",
     "build:types": "tsc --build tsconfig-lib.json && api-extractor run --local",
-    "dev": "webpack serve --progress --env debug --env demo --port 8000 --static .",
     "docs": "doctoc ./docs/API.md && api-documenter markdown -i api-extractor -o api-extractor/api-documenter && rm api-extractor/api-documenter/index.md && npm run docs-md-to-html",
     "docs-md-to-html": "generate-md --layout github --input api-extractor/api-documenter --output api-docs",
     "lint": "eslint src/ tests/ --ext .js --ext .ts",
@@ -61,6 +70,13 @@
     "@babel/register": "7.21.0",
     "@microsoft/api-documenter": "7.21.5",
     "@microsoft/api-extractor": "7.34.4",
+    "@rollup/plugin-alias": "4.0.3",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-replace": "5.0.2",
+    "@rollup/plugin-terser": "0.4.0",
+    "@rollup/plugin-typescript": "11.0.0",
     "@types/chai": "4.3.4",
     "@types/chart.js": "2.9.37",
     "@types/mocha": "10.0.1",
@@ -73,6 +89,7 @@
     "chart.js": "2.9.4",
     "chromedriver": "110.0.0",
     "coverage-istanbul-loader": "3.0.5",
+    "deepmerge": "4.3.0",
     "doctoc": "2.2.1",
     "eslint": "8.35.0",
     "eslint-config-prettier": "8.7.0",
@@ -86,12 +103,13 @@
     "jsonpack": "1.1.5",
     "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",
+    "karma-coverage": "2.2.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
+    "karma-rollup-preprocessor": "7.0.8",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.4.0",
-    "karma-webpack": "5.0.0",
     "lint-staged": "13.1.4",
     "markdown-styles": "3.2.0",
     "micromatch": "4.0.5",
@@ -100,16 +118,13 @@
     "node-fetch": "3.3.0",
     "prettier": "2.8.4",
     "promise-polyfill": "8.3.0",
+    "rollup": "3.19.1",
     "sauce-connect-launcher": "1.3.2",
     "selenium-webdriver": "4.8.1",
     "semver": "7.3.8",
     "sinon": "15.0.1",
     "sinon-chai": "3.7.0",
     "typescript": "4.9.5",
-    "url-toolkit": "2.2.5",
-    "webpack": "5.75.0",
-    "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0"
+    "url-toolkit": "2.2.5"
   }
 }