Modules all the way

2020-02-20 18:30:09 -07:00
parent ae70a1fb9d
commit c301d2413b
29 changed files with 316 additions and 173 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+16
--- a/config/jsdoc/api/conf.json
+++ b/config/jsdoc/api/conf.json
@@ -14,12 +14,12 @@
    ]
  },
  "plugins": [
-    "config/jsdoc/api/plugins/markdown",
+    "config/jsdoc/api/plugins/markdown.cjs",
    "jsdoc-plugin-typescript",
-    "config/jsdoc/api/plugins/inline-options",
-    "config/jsdoc/api/plugins/events",
-    "config/jsdoc/api/plugins/observable",
-    "config/jsdoc/api/plugins/api"
+    "config/jsdoc/api/plugins/inline-options.cjs",
+    "config/jsdoc/api/plugins/events.cjs",
+    "config/jsdoc/api/plugins/observable.cjs",
+    "config/jsdoc/api/plugins/api.cjs"
  ],
  "typescript": {
    "moduleRoot": "src"
--- a/config/jsdoc/api/plugins/api.cjs
+++ b/config/jsdoc/api/plugins/api.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * Define an @api tag
 * @param {Object} dictionary The tag dictionary.
--- a/config/jsdoc/api/plugins/events.cjs
+++ b/config/jsdoc/api/plugins/events.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const events = {};

 exports.handlers = {
--- a/config/jsdoc/api/plugins/inline-options.cjs
+++ b/config/jsdoc/api/plugins/inline-options.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * @fileoverview
 * Inlines option params from typedefs
--- a/config/jsdoc/api/plugins/markdown.cjs
+++ b/config/jsdoc/api/plugins/markdown.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * Modified from JSDoc's plugins/markdown and lib/jsdoc/util/markdown modules
 * (see https://github.com/jsdoc3/jsdoc/), which are licensed under the Apache 2
--- a/config/jsdoc/api/plugins/observable.cjs
+++ b/config/jsdoc/api/plugins/observable.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const classes = {};
 const observables = {};

--- a/config/jsdoc/api/template/publish.js
+++ b/config/jsdoc/api/template/publish.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /*global env: true */

 const hasOwnProp = Object.prototype.hasOwnProperty;
--- a/config/jsdoc/info/conf.json
+++ b/config/jsdoc/info/conf.json
@@ -11,8 +11,8 @@
    },
    "plugins": [
        "jsdoc-plugin-typescript",
-        "config/jsdoc/info/define-plugin",
-        "config/jsdoc/info/virtual-plugin"
+        "config/jsdoc/info/define-plugin.cjs",
+        "config/jsdoc/info/virtual-plugin.cjs"
    ],
    "typescript": {
      "moduleRoot": "src"
--- a/config/jsdoc/info/define-plugin.cjs
+++ b/config/jsdoc/info/define-plugin.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * @fileoverview  This plugin extracts info from boolean defines.  This only
 * handles boolean defines with the default value in the description.  Default
--- a/config/jsdoc/info/publish.js
+++ b/config/jsdoc/info/publish.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * @fileoverview Generates JSON output based on exportable symbols.
 */
--- a/config/jsdoc/info/virtual-plugin.cjs
+++ b/config/jsdoc/info/virtual-plugin.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 /**
 * Handle the interface and abstract annotations.
 * @param {Object} dictionary The tag dictionary.
--- a/config/jsdoc/package.json
+++ b/config/jsdoc/package.json
@@ -0,0 +1,4 @@
+{
+  "description": "JSDoc loads publish.js files with require(), so we need to configure everything under this path as a CommonJS module.",
+  "type": "commonjs"
+}
--- a/config/webpack-config-legacy-build.js
+++ b/config/webpack-config-legacy-build.js
@@ -1,7 +1,10 @@
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
+import TerserPlugin from 'terser-webpack-plugin';
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';

-module.exports = {
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+export default {
  entry: './build/index.js',
  devtool: 'source-map',
  mode: 'production',
@@ -18,7 +21,7 @@ module.exports = {
        },
        include: [
          path.join(
-            __dirname,
+            baseDir,
            '..',
            'node_modules',
            '@mapbox',
--- a/examples/webpack/.eslintrc
+++ b/examples/webpack/.eslintrc
@@ -5,12 +5,5 @@
  },
  "parserOptions": {
    "ecmaVersion": 2017
-  },
-  "rules": {
-    "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
-      "asyncArrow": "always"
-    }]
  }
 }
--- a/examples/webpack/config.js
+++ b/examples/webpack/config.js
@@ -1,12 +1,15 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const ExampleBuilder = require('./example-builder');
-const fs = require('fs');
-const path = require('path');
+import CopyPlugin from 'copy-webpack-plugin';
+import ExampleBuilder from './example-builder.js';
+import TerserPlugin from 'terser-webpack-plugin';
+import fs from 'fs';
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';

-const src = path.join(__dirname, '..');
+const baseDir = dirname(fileURLToPath(import.meta.url));

-module.exports = {
+const src = path.join(baseDir, '..');
+
+export default {
  context: src,
  target: ['web', 'es5'],
  entry: () => {
@@ -33,10 +36,10 @@ module.exports = {
          },
        },
        include: [
-          path.join(__dirname, '..', '..', 'src'),
-          path.join(__dirname, '..'),
+          path.join(baseDir, '..', '..', 'src'),
+          path.join(baseDir, '..'),
          path.join(
-            __dirname,
+            baseDir,
            '..',
            '..',
            'node_modules',
@@ -48,9 +51,9 @@ module.exports = {
      {
        test: /\.js$/,
        use: {
-          loader: path.join(__dirname, 'worker-loader.js'),
+          loader: path.join(baseDir, 'worker-loader.cjs'),
        },
-        include: [path.join(__dirname, '..', '..', 'src', 'ol', 'worker')],
+        include: [path.join(baseDir, '..', '..', 'src', 'ol', 'worker')],
      },
    ],
  },
@@ -77,7 +80,7 @@ module.exports = {
  },
  plugins: [
    new ExampleBuilder({
-      templates: path.join(__dirname, '..', 'templates'),
+      templates: path.join(baseDir, '..', 'templates'),
      common: 'common',
    }),
    new CopyPlugin({
@@ -93,7 +96,7 @@ module.exports = {
  devtool: 'source-map',
  output: {
    filename: '[name].js',
-    path: path.join(__dirname, '..', '..', 'build', 'examples'),
+    path: path.join(baseDir, '..', '..', 'build', 'examples'),
  },
  resolve: {
    fallback: {
@@ -101,7 +104,7 @@ module.exports = {
    },
    alias: {
      // allow imports from 'ol/module' instead of specifiying the source path
-      ol: path.join(__dirname, '..', '..', 'src', 'ol'),
+      ol: path.join(baseDir, '..', '..', 'src', 'ol'),
    },
  },
 };
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -1,20 +1,32 @@
-const assert = require('assert');
-const frontMatter = require('front-matter');
-const fs = require('fs');
-const handlebars = require('handlebars');
-const marked = require('marked');
-const path = require('path');
-const pkg = require('../../package.json');
-const promisify = require('util').promisify;
-const RawSource = require('webpack-sources').RawSource;
+import assert from 'assert';
+import frontMatter from 'front-matter';
+import fse from 'fs-extra';
+import handlebars from 'handlebars';
+import marked from 'marked';
+import path, {dirname} from 'path';
+import sources from 'webpack-sources';
+import {fileURLToPath} from 'url';
+
+const RawSource = sources.RawSource;
+const baseDir = dirname(fileURLToPath(import.meta.url));

-const readFile = promisify(fs.readFile);
 const isCssRegEx = /\.css(\?.*)?$/;
 const isJsRegEx = /\.js(\?.*)?$/;
 const importRegEx = /^import .* from '(.*)';$/;
 const isTemplateJs = /\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
 const isTemplateCss = /\/bootstrap(\.min)?\.css(\?.*)?$/;

+let cachedPackageInfo = null;
+async function getPackageInfo() {
+  if (cachedPackageInfo) {
+    return cachedPackageInfo;
+  }
+  cachedPackageInfo = await fse.readJSON(
+    path.resolve(baseDir, '../../package.json')
+  );
+  return cachedPackageInfo;
+}
+
 handlebars.registerHelper(
  'md',
  (str) => new handlebars.SafeString(marked(str))
@@ -111,9 +123,10 @@ function createWordIndex(exampleData) {
 /**
 * Gets dependencies from the js source.
 * @param {string} jsSource Source.
+ * @param {Object} pkg Package info.
 * @return {Object<string, string>} dependencies
 */
-function getDependencies(jsSource) {
+function getDependencies(jsSource, pkg) {
  const lines = jsSource.split('\n');
  const dependencies = {
    ol: pkg.version,
@@ -140,7 +153,7 @@ function getDependencies(jsSource) {
  return dependencies;
 }

-class ExampleBuilder {
+export default class ExampleBuilder {
  /**
   * A webpack plugin that builds the html files for our examples.
   * @param {Object} config Plugin configuration.  Requires a `templates` property
@@ -241,16 +254,17 @@ class ExampleBuilder {
  async parseExample(dir, name) {
    const htmlName = `${name}.html`;
    const htmlPath = path.join(dir, htmlName);
-    const htmlSource = await readFile(htmlPath, {encoding: 'utf8'});
+    const htmlSource = await fse.readFile(htmlPath, {encoding: 'utf8'});

    const jsName = `${name}.js`;
    const jsPath = path.join(dir, jsName);
-    const jsSource = await readFile(jsPath, {encoding: 'utf8'});
+    const jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});

    const {attributes, body} = frontMatter(htmlSource);
    assert(!!attributes.layout, `missing layout in ${htmlPath}`);
    const data = Object.assign(attributes, {contents: body});

+    const pkg = await getPackageInfo();
    data.olVersion = pkg.version;
    data.filename = htmlName;
    data.dir = dir;
@@ -299,7 +313,7 @@ class ExampleBuilder {
    const workerPath = path.join(data.dir, workerName);
    let workerSource;
    try {
-      workerSource = await readFile(workerPath, readOptions);
+      workerSource = await fse.readFile(workerPath, readOptions);
    } catch (err) {
      // pass
    }
@@ -321,11 +335,14 @@ class ExampleBuilder {
      assets[workerName] = workerSource;
    }

+    const pkg = await getPackageInfo();
+
    data.pkgJson = JSON.stringify(
      {
        name: data.name,
        dependencies: getDependencies(
-          jsSource + (workerSource ? `\n${workerSource}` : '')
+          jsSource + (workerSource ? `\n${workerSource}` : ''),
+          pkg
        ),
        devDependencies: {
          parcel: '^2.0.0-beta.1',
@@ -344,7 +361,7 @@ class ExampleBuilder {
    const cssPath = path.join(data.dir, cssName);
    let cssSource;
    try {
-      cssSource = await readFile(cssPath, readOptions);
+      cssSource = await fse.readFile(cssPath, readOptions);
    } catch (err) {
      // pass
    }
@@ -358,6 +375,7 @@ class ExampleBuilder {

    // add additional resources
    if (data.resources) {
+      const pkg = await getPackageInfo();
      const localResources = [];
      const remoteResources = [];
      data.resources.forEach((resource) => {
@@ -389,11 +407,9 @@ class ExampleBuilder {
    }

    const templatePath = path.join(this.templates, data.layout);
-    const templateSource = await readFile(templatePath, readOptions);
+    const templateSource = await fse.readFile(templatePath, readOptions);

    assets[data.filename] = handlebars.compile(templateSource)(data);
    return assets;
  }
 }
-
-module.exports = ExampleBuilder;
--- a/examples/webpack/worker-loader.cjs
+++ b/examples/webpack/worker-loader.cjs
@@ -1,6 +1,8 @@
-const build = require('../../tasks/serialize-workers').build;
+/* eslint-disable import/no-commonjs */

-function loader() {
+const build = require('../../tasks/serialize-workers.cjs').build;
+
+module.exports = function loader() {
  const callback = this.async();
  const minify = this.mode === 'production';

@@ -12,6 +14,4 @@ function loader() {
      callback(null, chunk.code);
    })
    .catch(callback);
-}
-
-module.exports = loader;
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
      },
      "devDependencies": {
        "@babel/core": "^7.6.4",
+        "@babel/eslint-parser": "^7.13.14",
        "@babel/preset-env": "^7.4.4",
        "@openlayers/eslint-plugin": "^4.0.0",
        "@rollup/plugin-babel": "^5.3.0",
@@ -32,6 +33,7 @@
        "copy-webpack-plugin": "^8.0.0",
        "coverage-istanbul-loader": "^3.0.5",
        "coveralls": "3.1.0",
+        "es-main": "^1.0.2",
        "eslint": "^7.2.0",
        "eslint-config-openlayers": "^15.0.0",
        "expect.js": "0.3.1",
@@ -66,7 +68,7 @@
        "shx": "^0.3.2",
        "sinon": "^10.0.0",
        "terser-webpack-plugin": "^5.1.1",
-        "typescript": "^4.2.3",
+        "typescript": "^4.2.4",
        "url-polyfill": "^1.1.5",
        "walk": "^2.3.9",
        "webpack": "^5.27.2",
@@ -127,6 +129,33 @@
        "url": "https://opencollective.com/babel"
      }
    },
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.13.14.tgz",
+      "integrity": "sha512-I0HweR36D73Ibn/FfrRDMKlMqJHFwidIUgYdMpH+aXYuQC+waq59YaJ6t9e9N36axJ82v1jR041wwqDrDXEwRA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-scope": "^5.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": ">=7.5.0"
+      }
+    },
+    "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@babel/generator": {
      "version": "7.13.16",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz",
@@ -3631,6 +3660,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/es-main": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-main/-/es-main-1.0.2.tgz",
+      "integrity": "sha512-LLgW8Cby/FiyQygrI23q2EswulHiDKoyjWlDRgTGXjQ3iRim2R26VfoehpxI5oKRXSNams3L/80KtggoUdxdDQ==",
+      "dev": true
+    },
    "node_modules/es-module-lexer": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
@@ -11410,6 +11445,25 @@
        "source-map": "^0.5.0"
      }
    },
+    "@babel/eslint-parser": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.13.14.tgz",
+      "integrity": "sha512-I0HweR36D73Ibn/FfrRDMKlMqJHFwidIUgYdMpH+aXYuQC+waq59YaJ6t9e9N36axJ82v1jR041wwqDrDXEwRA==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^5.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
+      }
+    },
    "@babel/generator": {
      "version": "7.13.16",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz",
@@ -14260,6 +14314,12 @@
        "unbox-primitive": "^1.0.0"
      }
    },
+    "es-main": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-main/-/es-main-1.0.2.tgz",
+      "integrity": "sha512-LLgW8Cby/FiyQygrI23q2EswulHiDKoyjWlDRgTGXjQ3iRim2R26VfoehpxI5oKRXSNams3L/80KtggoUdxdDQ==",
+      "dev": true
+    },
    "es-module-lexer": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -15,21 +15,21 @@
    "test-rendering": "node test/rendering/test.js",
    "test-spec": "npm run karma -- --single-run --log-level error",
    "test": "npm run test-spec && npm run test-rendering -- --force",
-    "karma": "karma start test/browser/karma.config.js",
+    "karma": "karma start test/browser/karma.config.cjs",
    "start": "npm run serve-examples",
    "serve-examples": "webpack serve --config examples/webpack/config.js --mode development",
    "build-examples": "webpack --config examples/webpack/config.js --mode production",
-    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package",
-    "build-index": "npm run build-package && node tasks/generate-index",
+    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package.js",
+    "build-index": "npm run build-package && node tasks/generate-index.js",
    "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
    "build-site": "npm run build-examples && npm run apidoc && mkdir -p build/site && cp site/index.html build/site && mv build/apidoc build/site/apidoc && mv build/examples build/site/examples",
    "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && tsc --project config/tsconfig-build.json",
    "typecheck": "tsc --pretty",
    "apidoc-debug": "shx rm -rf build/apidoc && node --inspect-brk=9229 ./node_modules/jsdoc/jsdoc.js -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
    "apidoc": "shx rm -rf build/apidoc && jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
  },
-  "main": "index.js",
+  "type": "module",
  "repository": {
    "type": "git",
    "url": "git://github.com/openlayers/openlayers.git"
@@ -49,6 +49,7 @@
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
+    "@babel/eslint-parser": "^7.13.14",
    "@babel/preset-env": "^7.4.4",
    "@openlayers/eslint-plugin": "^4.0.0",
    "@rollup/plugin-babel": "^5.3.0",
@@ -66,6 +67,7 @@
    "copy-webpack-plugin": "^8.0.0",
    "coverage-istanbul-loader": "^3.0.5",
    "coveralls": "3.1.0",
+    "es-main": "^1.0.2",
    "eslint": "^7.2.0",
    "eslint-config-openlayers": "^15.0.0",
    "expect.js": "0.3.1",
@@ -100,7 +102,7 @@
    "shx": "^0.3.2",
    "sinon": "^10.0.0",
    "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
    "url-polyfill": "^1.1.5",
    "walk": "^2.3.9",
    "webpack": "^5.27.2",
@@ -113,10 +115,15 @@
  },
  "eslintConfig": {
    "extends": "openlayers",
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+      "requireConfigFile": false
+    },
    "plugins": [
      "@openlayers"
    ],
    "rules": {
+      "import/no-commonjs": "error",
      "@openlayers/no-exclusive-tests": [
        "error",
        {
--- a/tasks/generate-index.js
+++ b/tasks/generate-index.js
@@ -1,6 +1,9 @@
-const fse = require('fs-extra');
-const path = require('path');
-const generateInfo = require('./generate-info');
+import esMain from 'es-main';
+import fse from 'fs-extra';
+import generateInfo from './generate-info.js';
+import path from 'path';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';

 /**
 * Read the symbols from info file.
@@ -21,11 +24,11 @@ function getImport(symbol, member) {
  const defaultExport = symbol.name.split('~');
  const namedExport = symbol.name.split('.');
  if (defaultExport.length > 1 && defaultExport[0].indexOf('.') === -1) {
-    const from = defaultExport[0].replace(/^module\:/, './');
+    const from = defaultExport[0].replace(/^module\:/, './') + '.js';
    const importName = from.replace(/[.\/]+/g, '$');
    return `import ${importName} from '${from}';`;
  } else if (namedExport.length > 1 && member) {
-    const from = namedExport[0].replace(/^module\:/, './');
+    const from = namedExport[0].replace(/^module\:/, './') + '.js';
    const importName = from.replace(/[.\/]+/g, '_');
    return `import {${member} as ${importName}$${member}} from '${from}';`;
  }
@@ -97,7 +100,7 @@ function generateExports(symbols) {
 * Generate the exports code.
 * @return {Promise<string>} Resolves with the exports code.
 */
-async function main() {
+export default async function main() {
  const symbols = await getSymbols();
  return generateExports(symbols);
 }
@@ -106,18 +109,15 @@ async function main() {
 * If running this module directly, read the config file, call the main
 * function, and write the output file.
 */
-if (require.main === module) {
+if (esMain(import.meta)) {
+  const baseDir = dirname(fileURLToPath(import.meta.url));
+
  main()
    .then(async (code) => {
-      const filepath = path.join(__dirname, '..', 'build', 'index.js');
+      const filepath = path.join(baseDir, '..', 'build', 'index.js');
      await fse.outputFile(filepath, code);
    })
    .catch((err) => {
      process.stderr.write(`${err.message}\n`, () => process.exit(1));
    });
 }
-
-/**
- * Export main function.
- */
-module.exports = main;
--- a/tasks/generate-info.js
+++ b/tasks/generate-info.js
@@ -1,11 +1,16 @@
-const fse = require('fs-extra');
-const path = require('path');
-const spawn = require('child_process').spawn;
-const walk = require('walk').walk;
-const isWindows = process.platform.indexOf('win') === 0;
+import esMain from 'es-main';
+import fse from 'fs-extra';
+import path from 'path';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {spawn} from 'child_process';
+import {walk} from 'walk';

-const sourceDir = path.join(__dirname, '..', 'src');
-const infoPath = path.join(__dirname, '..', 'build', 'info.json');
+const isWindows = process.platform.indexOf('win') === 0;
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+const sourceDir = path.join(baseDir, '..', 'src');
+const infoPath = path.join(baseDir, '..', 'build', 'info.json');

 /**
 * Get checked path of a binary.
@@ -17,9 +22,15 @@ function getBinaryPath(binaryName) {
    binaryName += '.cmd';
  }

-  const jsdocResolved = require.resolve('jsdoc/jsdoc.js');
+  const jsdocResolved = path.join(
+    baseDir,
+    '..',
+    'node_modules',
+    'jsdoc',
+    'jsdoc.js'
+  );
  const expectedPaths = [
-    path.join(__dirname, '..', 'node_modules', '.bin', binaryName),
+    path.join(baseDir, '..', 'node_modules', '.bin', binaryName),
    path.resolve(
      path.join(path.dirname(jsdocResolved), '..', '.bin', binaryName)
    ),
@@ -40,7 +51,7 @@ function getBinaryPath(binaryName) {
 const jsdoc = getBinaryPath('jsdoc');

 const jsdocConfig = path.join(
-  __dirname,
+  baseDir,
  '..',
  'config',
  'jsdoc',
@@ -120,7 +131,7 @@ function spawnJSDoc(paths) {
  return new Promise((resolve, reject) => {
    let output = '';
    let errors = '';
-    const cwd = path.join(__dirname, '..');
+    const cwd = path.join(baseDir, '..');
    const child = spawn(jsdoc, ['-c', jsdocConfig].concat(paths), {cwd: cwd});

    child.stdout.on('data', (data) => {
@@ -162,7 +173,7 @@ async function write(info) {
 * Generate info from the sources.
 * @return {Promise<Error>} Resolves with the info object.
 */
-async function main() {
+export default async function main() {
  const paths = await getPaths();
  return await spawnJSDoc(paths);
 }
@@ -170,15 +181,10 @@ async function main() {
 /**
 * If running this module directly, generate and write out the info.json file.
 */
-if (require.main === module) {
+if (esMain(import.meta)) {
  main()
    .then(write)
    .catch((err) => {
      process.stderr.write(`${err.message}\n`, () => process.exit(1));
    });
 }
-
-/**
- * Export main function.
- */
-module.exports = main;
--- a/tasks/next-dev-version.js
+++ b/tasks/next-dev-version.js
@@ -1,7 +1,11 @@
-const version = require('../package.json').version;
-const semver = require('semver');
+import esMain from 'es-main';
+import process from 'process';
+import semver from 'semver';
+import {promises as fs} from 'fs';

-function nextVersion() {
+async function nextVersion() {
+  const pkg = await fs.readFile('../package.json', {encoding: 'utf8'});
+  const version = JSON.parse(pkg).version;
  const s = semver.parse(version);
  if (!s) {
    throw new Error(`Invalid version ${version}`);
@@ -9,6 +13,13 @@ function nextVersion() {
  return `${s.major}.${s.minor}.${s.patch}-dev.${Date.now()}`;
 }

-if (require.main === module) {
-  process.stdout.write(`${nextVersion()}\n`);
+if (esMain(import.meta)) {
+  nextVersion()
+    .then((version) => {
+      process.stdout.write(`${version}\n`);
+    })
+    .catch((error) => {
+      process.stderr.write(`${error}\n`);
+      process.exit(1);
+    });
 }
--- a/tasks/prepare-package.js
+++ b/tasks/prepare-package.js
@@ -1,35 +1,49 @@
-const fs = require('fs');
-const path = require('path');
-const pkg = require('../package.json');
+import esMain from 'es-main';
+import fse from 'fs-extra';
+import path from 'path';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';

-const buildDir = path.resolve(__dirname, '../build/ol');
+const baseDir = dirname(fileURLToPath(import.meta.url));
+const buildDir = path.resolve(baseDir, '../build/ol');

-// update the version number in util.js
-const utilPath = path.join(buildDir, 'util.js');
-const versionRegEx = /var VERSION = '(.*)';/g;
-const utilSrc = fs
-  .readFileSync(utilPath, 'utf-8')
-  .replace(versionRegEx, `var VERSION = '${pkg.version}';`);
-fs.writeFileSync(utilPath, utilSrc, 'utf-8');
+async function main() {
+  const pkg = await fse.readJSON(path.resolve(baseDir, '../package.json'));

-// write out simplified package.json
-delete pkg.scripts;
-delete pkg.devDependencies;
-delete pkg.style;
-delete pkg.eslintConfig;
-delete pkg.private;
-fs.writeFileSync(
-  path.join(buildDir, 'package.json'),
-  JSON.stringify(pkg, null, 2),
-  'utf-8'
-);
+  // update the version number in util.js
+  const utilPath = path.join(buildDir, 'util.js');
+  const versionRegEx = /var VERSION = '(.*)';/g;
+  let utilSrc = await fse.readFile(utilPath, 'utf-8');
+  utilSrc = utilSrc.replace(versionRegEx, `var VERSION = '${pkg.version}';`);
+  await fse.writeFile(utilPath, utilSrc, 'utf-8');

-// copy in readme and license files
-fs.copyFileSync(
-  path.resolve(__dirname, '../README.md'),
-  path.join(buildDir, 'README.md')
-);
-fs.copyFileSync(
-  path.resolve(__dirname, '../LICENSE.md'),
-  path.join(buildDir, 'LICENSE.md')
-);
+  // write out simplified package.json
+  pkg.main = 'index.js';
+  delete pkg.scripts;
+  delete pkg.devDependencies;
+  delete pkg.style;
+  delete pkg.eslintConfig;
+  delete pkg.private;
+  await fse.writeJSON(path.join(buildDir, 'package.json'), pkg, {spaces: 2});
+
+  // copy in readme and license files
+  await fse.copyFile(
+    path.resolve(baseDir, '../README.md'),
+    path.join(buildDir, 'README.md')
+  );
+
+  await fse.copyFile(
+    path.resolve(baseDir, '../LICENSE.md'),
+    path.join(buildDir, 'LICENSE.md')
+  );
+}
+
+/**
+ * If running this module directly, read the config file, call the main
+ * function, and write the output file.
+ */
+if (esMain(import.meta)) {
+  main().catch((err) => {
+    process.stderr.write(`${err.message}\n`, () => process.exit(1));
+  });
+}
--- a/tasks/serialize-workers.cjs
+++ b/tasks/serialize-workers.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const path = require('path');
 const babel = require('@rollup/plugin-babel').babel;
 const resolve = require('@rollup/plugin-node-resolve').nodeResolve;
--- a/test/browser/index_test.js
+++ b/test/browser/index_test.js
@@ -1,5 +0,0 @@
-// require all modules ending in ".test.js" from the
-// current directory and all subdirectories
-const testsContext = require.context('./spec', true, /\.test\.js$/);
-
-testsContext.keys().forEach(testsContext);
--- a/test/browser/karma.config.cjs
+++ b/test/browser/karma.config.cjs
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 const path = require('path');

 module.exports = function (karma) {
@@ -45,7 +47,7 @@ module.exports = function (karma) {
        pattern: path.resolve(__dirname, './test-extensions.js'),
      },
      {
-        pattern: path.resolve(__dirname, './index_test.js'),
+        pattern: 'spec/**/*.test.js',
        watched: false,
      },
      {
@@ -54,7 +56,6 @@ module.exports = function (karma) {
        watched: false,
      },
    ],
-    exclude: ['**/*.test.js'],
    proxies: {
      '/spec/': '/base/spec/',
    },
@@ -99,7 +100,7 @@ module.exports = function (karma) {
            use: {
              loader: path.join(
                __dirname,
-                '../../examples/webpack/worker-loader.js'
+                '../../examples/webpack/worker-loader.cjs'
              ),
            },
            include: [path.join(__dirname, '../../src/ol/worker')],
--- a/test/rendering/test.js
+++ b/test/rendering/test.js
@@ -1,18 +1,24 @@
 #! /usr/bin/env node
-const puppeteer = require('puppeteer');
-const webpack = require('webpack');
-const config = require('./webpack.config');
-const webpackMiddleware = require('webpack-dev-middleware');
-const express = require('express');
-const path = require('path');
-const png = require('pngjs');
-const fs = require('fs');
-const fse = require('fs-extra');
-const pixelmatch = require('pixelmatch');
-const yargs = require('yargs');
-const log = require('loglevelnext');
-const globby = require('globby');
-const serveStatic = require('serve-static');
+import config from './webpack.config.js';
+import esMain from 'es-main';
+import express from 'express';
+import fs from 'fs';
+import fse from 'fs-extra';
+import globby from 'globby';
+import log from 'loglevelnext';
+import path from 'path';
+import pixelmatch from 'pixelmatch';
+import png from 'pngjs';
+import puppeteer from 'puppeteer';
+import serveStatic from 'serve-static';
+import webpack from 'webpack';
+import webpackMiddleware from 'webpack-dev-middleware';
+import yargs from 'yargs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {hideBin} from 'yargs/helpers';
+
+const baseDir = dirname(fileURLToPath(import.meta.url));

 const compiler = webpack(Object.assign({mode: 'development'}, config));

@@ -20,11 +26,11 @@ function getHref(entry) {
  return path.dirname(entry).slice(1) + '/';
 }

-const staticHandler = serveStatic(__dirname);
+const staticHandler = serveStatic(baseDir);

-const defaultHandler = serveStatic(path.join(__dirname, 'default'));
+const defaultHandler = serveStatic(path.join(baseDir, 'default'));

-const srcHandler = serveStatic(path.join(__dirname, '..', '..', 'src'));
+const srcHandler = serveStatic(path.join(baseDir, '..', '..', 'src'));

 function indexHandler(req, res) {
  const items = [];
@@ -91,15 +97,15 @@ function serve(options) {
 }

 function getActualScreenshotPath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'actual.png');
+  return path.join(baseDir, path.dirname(entry), 'actual.png');
 }

 function getExpectedScreenshotPath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'expected.png');
+  return path.join(baseDir, path.dirname(entry), 'expected.png');
 }

 function getPassFilePath(entry) {
-  return path.join(__dirname, path.dirname(entry), 'pass');
+  return path.join(baseDir, path.dirname(entry), 'pass');
 }

 function parsePNG(filepath) {
@@ -284,7 +290,7 @@ async function getLatest(patterns) {

 async function getOutdated(entries, options) {
  const libTime = await getLatest(
-    path.join(__dirname, '..', 'src', 'ol', '**', '*')
+    path.join(baseDir, '..', 'src', 'ol', '**', '*')
  );
  options.log.debug('library time', libTime);
  const outdated = [];
@@ -298,7 +304,7 @@ async function getOutdated(entries, options) {
    }

    const caseTime = await getLatest(
-      path.join(__dirname, path.dirname(entry), '**', '*')
+      path.join(baseDir, path.dirname(entry), '**', '*')
    );
    options.log.debug('case time', entry, caseTime);
    if (passTime < caseTime) {
@@ -337,8 +343,8 @@ function sleep(ms) {
  });
 }

-if (require.main === module) {
-  const options = yargs
+if (esMain(import.meta)) {
+  const options = yargs(hideBin(process.argv))
    .option('fix', {
      describe: 'Accept all screenshots as accepted',
      type: 'boolean',
--- a/test/rendering/webpack.config.js
+++ b/test/rendering/webpack.config.js
@@ -1,7 +1,10 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';

-const cases = path.join(__dirname, 'cases');
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+const cases = path.join(baseDir, 'cases');

 const caseDirs = fs.readdirSync(cases).filter((name) => {
  let exists = true;
@@ -18,8 +21,8 @@ caseDirs.forEach((c) => {
  entry[`cases/${c}/main`] = `./cases/${c}/main.js`;
 });

-module.exports = {
-  context: __dirname,
+export default {
+  context: baseDir,
  target: 'web',
  entry: entry,
  devtool: 'source-map',
@@ -30,18 +33,18 @@ module.exports = {
        test: /\.js$/,
        use: {
          loader: path.join(
-            __dirname,
-            '../../examples/webpack/worker-loader.js'
+            baseDir,
+            '../../examples/webpack/worker-loader.cjs'
          ),
        },
-        include: [path.join(__dirname, '../../src/ol/worker')],
+        include: [path.join(baseDir, '../../src/ol/worker')],
      },
    ],
  },
  resolve: {
    alias: {
      // ol-mapbox-style imports ol/style/Style etc
-      ol: path.join(__dirname, '..', '..', 'src', 'ol'),
+      ol: path.join(baseDir, '..', '..', 'src', 'ol'),
    },
  },
 };