feat: remove cjs wrapper (#1146)

Author: alexander-akait

package.json

@@ -11,31 +11,33 @@
  "type": "opencollective",
  "url": "https://opencollective.com/webpack"
  },
- "main": "dist/cjs.js",
- "types": "types/cjs.d.ts",
+ "main": "dist/index.js",
+ "types": "types/index.d.ts",
  "engines": {
  "node": ">= 12.13.0"
  },
  "scripts": {
  "commitlint": "commitlint --from=master",
+ "security": "npm audit --production",
  "fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
  "lint:js": "eslint --cache src test",
  "lint:types": "tsc --pretty --noEmit",
  "lint": "npm-run-all lint:js fmt:check",
  "fmt": "npm run fmt:check -- --write",
  "fix:js": "npm run lint:js -- --fix",
  "fix": "npm-run-all fix:js fmt",
- "prepare": "husky install && npm run build",
+ "clean": "del-cli dist types",
+ "prebuild": "npm run clean",
  "build:types": "tsc --declaration --emitDeclarationOnly --outDir types && prettier \"types/**/*.ts\" --write",
  "build:code": "cross-env NODE_ENV=production babel src -d dist --copy-files",
  "build": "npm-run-all -p \"build:**\"",
- "release": "standard-version",
- "security": "npm audit --production",
  "test:only": "cross-env NODE_ENV=test jest",
  "test:watch": "npm run test:only -- --watch",
  "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
  "pretest": "npm run lint",
- "test": "npm run test:coverage"
+ "test": "npm run test:coverage",
+ "prepare": "husky install && npm run build",
+ "release": "standard-version"
  },
  "files": [
  "dist",

src/cjs.js

@@ -1,13 +1,13 @@
-import { validate } from "schema-utils";
-import mime from "mime-types";
+const { validate } = require("schema-utils");
+const mime = require("mime-types");
 
-import middleware from "./middleware";
-import getFilenameFromUrl from "./utils/getFilenameFromUrl";
-import setupHooks from "./utils/setupHooks";
-import setupWriteToDisk from "./utils/setupWriteToDisk";
-import setupOutputFileSystem from "./utils/setupOutputFileSystem";
-import ready from "./utils/ready";
-import schema from "./options.json";
+const middleware = require("./middleware");
+const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
+const setupHooks = require("./utils/setupHooks");
+const setupWriteToDisk = require("./utils/setupWriteToDisk");
+const setupOutputFileSystem = require("./utils/setupOutputFileSystem");
+const ready = require("./utils/ready");
+const schema = require("./options.json");
 
 const noop = () => {};
 
@@ -18,10 +18,9 @@ const noop = () => {};
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 
-// TODO fix me
 /**
  * @typedef {Object} ExtendedServerResponse
- * @property {{ webpack?: { devMiddleware?: Context<any, any> } }} [locals]
+ * @property {{ webpack?: { devMiddleware?: Context<IncomingMessage, ServerResponse> } }} [locals]
  */
 
 /** @typedef {import("http").IncomingMessage} IncomingMessage */
@@ -146,7 +145,7 @@ const noop = () => {};
  * @param {Options<Request, Response>} [options]
  * @returns {API<Request, Response>}
  */
-export default function wdm(compiler, options = {}) {
+function wdm(compiler, options = {}) {
  validate(/** @type {Schema} */ (schema), options, {
  name: "Dev Middleware",
  baseDataPath: "options",
@@ -277,3 +276,5 @@ export default function wdm(compiler, options = {}) {
 
  return instance;
 }
+
+module.exports = wdm;

src/index.js

@@ -1,18 +1,18 @@
-import path from "path";
+const path = require("path");
 
-import mime from "mime-types";
-import parseRange from "range-parser";
+const mime = require("mime-types");
+const parseRange = require("range-parser");
 
-import getFilenameFromUrl from "./utils/getFilenameFromUrl";
-import {
+const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
+const {
  getHeaderNames,
  getHeaderFromRequest,
  getHeaderFromResponse,
  setHeaderForResponse,
  setStatusCode,
  send,
-} from "./utils/compatibleAPI";
-import ready from "./utils/ready";
+} = require("./utils/compatibleAPI");
+const ready = require("./utils/ready");
 
 /** @typedef {import("./index.js").NextFunction} NextFunction */
 /** @typedef {import("./index.js").IncomingMessage} IncomingMessage */
@@ -58,7 +58,7 @@ const BYTES_RANGE_REGEXP = /^ *bytes/i;
  * @param {import("./index.js").Context<Request, Response>} context
  * @return {import("./index.js").Middleware<Request, Response>}
  */
-export default function wrapper(context) {
+function wrapper(context) {
  return async function middleware(req, res, next) {
  const acceptedMethods = context.options.methods || ["GET", "HEAD"];
 
@@ -270,3 +270,5 @@ export default function wrapper(context) {
  }
  };
 }
+
+module.exports = wrapper;

src/middleware.js

@@ -1,8 +1,8 @@
-import path from "path";
-import { parse } from "url";
-import querystring from "querystring";
+const path = require("path");
+const { parse } = require("url");
+const querystring = require("querystring");
 
-import getPaths from "./getPaths";
+const getPaths = require("./getPaths");
 
 /** @typedef {import("../index.js").IncomingMessage} IncomingMessage */
 /** @typedef {import("../index.js").ServerResponse} ServerResponse */
@@ -49,7 +49,7 @@ const memoizedParse = mem(parse);
  * @param {string} url
  * @returns {string | undefined}
  */
-export default function getFilenameFromUrl(context, url) {
+function getFilenameFromUrl(context, url) {
  const { options } = context;
  const paths = getPaths(context);
 
@@ -142,3 +142,5 @@ export default function getFilenameFromUrl(context, url) {
  // eslint-disable-next-line consistent-return
  return foundFilename;
 }
+
+module.exports = getFilenameFromUrl;

src/utils/getFilenameFromUrl.js

@@ -9,7 +9,7 @@
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function getPaths(context) {
+function getPaths(context) {
  const { stats, options } = context;
  /** @type {Stats[]} */
  const childStats =
@@ -35,3 +35,5 @@ export default function getPaths(context) {
 
  return publicPaths;
 }
+
+module.exports = getPaths;

src/utils/getPaths.js

@@ -9,7 +9,7 @@
  * @param {Request} [req]
  * @returns {void}
  */
-export default function ready(context, callback, req) {
+function ready(context, callback, req) {
  if (context.state) {
  callback(context.stats);
 
@@ -22,3 +22,5 @@ export default function ready(context, callback, req) {
 
  context.callbacks.push(callback);
 }
+
+module.exports = ready;

src/utils/ready.js

@@ -1,5 +1,5 @@
-import webpack from "webpack";
-import { isColorSupported } from "colorette";
+const webpack = require("webpack");
+const { isColorSupported } = require("colorette");
 
 /** @typedef {import("webpack").Configuration} Configuration */
 /** @typedef {import("webpack").Compiler} Compiler */
@@ -20,7 +20,7 @@ import { isColorSupported } from "colorette";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupHooks(context) {
+function setupHooks(context) {
  function invalid() {
  if (context.state) {
  context.logger.log("Compilation starting...");
@@ -198,3 +198,5 @@ export default function setupHooks(context) {
  context.compiler.hooks.invalid.tap("webpack-dev-middleware", invalid);
  context.compiler.hooks.done.tap("webpack-dev-middleware", done);
 }
+
+module.exports = setupHooks;

src/utils/setupHooks.js

@@ -1,6 +1,5 @@
-import path from "path";
-
-import { createFsFromVolume, Volume } from "memfs";
+const path = require("path");
+const memfs = require("memfs");
 
 /** @typedef {import("webpack").MultiCompiler} MultiCompiler */
 /** @typedef {import("../index.js").IncomingMessage} IncomingMessage */
@@ -11,7 +10,7 @@ import { createFsFromVolume, Volume } from "memfs";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupOutputFileSystem(context) {
+function setupOutputFileSystem(context) {
  let outputFileSystem;
 
  if (context.options.outputFileSystem) {
@@ -34,7 +33,7 @@ export default function setupOutputFileSystem(context) {
 
  outputFileSystem = outputFileSystemFromOptions;
  } else {
- outputFileSystem = createFsFromVolume(new Volume());
+ outputFileSystem = memfs.createFsFromVolume(new memfs.Volume());
  // TODO: remove when we drop webpack@4 support
  // @ts-ignore
  outputFileSystem.join = path.join.bind(path);
@@ -52,3 +51,5 @@ export default function setupOutputFileSystem(context) {
  // eslint-disable-next-line no-param-reassign
  context.outputFileSystem = outputFileSystem;
 }
+
+module.exports = setupOutputFileSystem;

src/utils/setupOutputFileSystem.js

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+const fs = require("fs");
+const path = require("path");
 
 /** @typedef {import("webpack").Compiler} Compiler */
 /** @typedef {import("webpack").MultiCompiler} MultiCompiler */
@@ -12,7 +12,7 @@ import path from "path";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupWriteToDisk(context) {
+function setupWriteToDisk(context) {
  /**
  * @type {Compiler[]}
  */
@@ -113,3 +113,5 @@ export default function setupWriteToDisk(context) {
  );
  }
 }
+
+module.exports = setupWriteToDisk;