Implement --polyfill-node/ config.polyfill_node

This commit adds `--polyfill-node` as a cli argument and `polyfill_node` as a config field. It uses https://github.com/remorses/esbuild-plugins / https://github.com/ionic-team/rollup-plugin-node-polyfills/ for the polyfills. I also added a warning for the tradeoffs whenever this config is used. We may want better polyfills in the future, and maybe even better messaging if we can recognise popular libraries and suggest replacements.

packages/wrangler/package.json

@@ -40,7 +40,9 @@
     "esbuild": "0.14.1",
     "miniflare": "2.0.0-rc.2",
     "semiver": "^1.1.0",
-    "serve": "^13.0.2"
+    "serve": "^13.0.2",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.2"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"

packages/wrangler/scripts/bundle.ts

@@ -12,7 +12,14 @@ async function run() {
     platform: "node",
     format: "cjs",
     // minify: true, // TODO: enable this again
-    external: ["fsevents", "esbuild", "miniflare", "@miniflare/core"], // todo - bundle miniflare too
+    external: [
+      "fsevents",
+      "esbuild",
+      "miniflare",
+      "@miniflare/core",
+      "@esbuild-plugins/node-globals-polyfill",
+      "@esbuild-plugins/node-modules-polyfill",
+    ], // todo - bundle miniflare too
     sourcemap: true,
     inject: [path.join(__dirname, "../import_meta_url.js")],
     define: {

packages/wrangler/src/config.ts

@@ -81,6 +81,7 @@ type Env = {
   site?: Site;
   jsx_factory?: string; // inherited
   jsx_fragment?: string; // inherited
+  polyfill_node?: boolean; //inherited
   // we should use typescript to parse cron patterns
   triggers?: { crons: Cron[] }; // inherited
   vars?: Vars;
@@ -107,6 +108,7 @@ export type Config = {
   webpack_config?: string; // inherited
   jsx_factory?: string; // inherited
   jsx_fragment?: string; // inherited
+  polyfill_node?: boolean; //inherited
   vars?: Vars;
   migrations?: DOMigration[];
   durable_objects?: { bindings: DurableObject[] };

packages/wrangler/src/dev.tsx

@@ -22,6 +22,8 @@ import commandExists from "command-exists";
 import assert from "assert";
 import { getAPIToken } from "./user";
 import fetch from "node-fetch";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
+import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -40,6 +42,7 @@ type Props = {
   compatibilityDate: void | string;
   compatibilityFlags: void | string[];
   usageModel: void | "bundled" | "unbound";
+  polyfillNode: void | boolean;
 };
 
 export function Dev(props: Props): JSX.Element {
@@ -58,6 +61,7 @@ export function Dev(props: Props): JSX.Element {
     staticRoot: props.public,
     jsxFactory: props.jsxFactory,
     jsxFragment: props.jsxFragment,
+    polyfillNode: props.polyfillNode,
   });
   if (bundle && bundle.type === "commonjs" && !props.format && props.public) {
     throw new Error(
@@ -348,15 +352,26 @@ function useEsbuild(props: {
   staticRoot: void | string;
   jsxFactory: string | void;
   jsxFragment: string | void;
+  polyfillNode: boolean | void;
 }): EsbuildBundle | void {
-  const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
+  const {
+    entry,
+    destination,
+    staticRoot,
+    jsxFactory,
+    jsxFragment,
+    polyfillNode,
+  } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
     let result: esbuild.BuildResult;
     async function build() {
       if (!destination) return;
       result = await esbuild.build({
         entryPoints: [entry],
+        define: {
+          ...(polyfillNode && { global: "globalThis" }),
+        },
         bundle: true,
         outdir: destination,
         metafile: true,
@@ -365,6 +380,9 @@ function useEsbuild(props: {
         loader: {
           ".js": "jsx",
         },
+        plugins: polyfillNode
+          ? [NodeGlobalsPolyfills({ buffer: true }), NodeModulesPolyfills()]
+          : undefined,
         ...(jsxFactory && { jsxFactory }),
         ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
@@ -397,7 +415,7 @@ function useEsbuild(props: {
     return () => {
       result?.stop();
     };
-  }, [entry, destination, staticRoot, jsxFactory, jsxFragment]);
+  }, [entry, destination, staticRoot, jsxFactory, jsxFragment, polyfillNode]);
   return bundle;
 }