Modules all the way

examples/webpack/.eslintrc

@@ -5,12 +5,5 @@
   },
   "parserOptions": {
     "ecmaVersion": 2017
-  },
-  "rules": {
-    "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
-      "asyncArrow": "always"
-    }]
   }
 }

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'),
     },
   },
 };

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;

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;
+};