chore(gatsby-cli): bundle dependencies (#27058)

* feat(cli): bundle package to workaround node_moduless tree resolution problems with npm

* use bundled babel helpers

* concurrently -> npm-run-all (for consistency)

* inline babel config for rollup, get rif of "non-rollup-baell.config.js"

* DRY extensions in config

Author: pieh

packages/gatsby-cli/.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": [["babel-preset-gatsby-package"]]
+  "presets": [
+    [
+      "babel-preset-gatsby-package"
+    ]
+  ]
 }

packages/gatsby-cli/package.json

@@ -27,8 +27,6 @@
     "gatsby-recipes": "^0.2.33",
     "gatsby-telemetry": "^1.3.38",
     "hosted-git-info": "^3.0.6",
-    "ink": "^2.7.1",
-    "ink-spinner": "^3.1.0",
     "is-valid-path": "^0.1.1",
     "lodash": "^4.17.20",
     "meant": "^1.0.2",
@@ -37,7 +35,6 @@
     "pretty-error": "^2.1.1",
     "progress": "^2.0.3",
     "prompts": "^2.3.2",
-    "react": "^16.8.0",
     "redux": "^4.0.5",
     "resolve-cwd": "^3.0.0",
     "semver": "^7.3.2",
@@ -48,16 +45,29 @@
     "update-notifier": "^4.1.3",
     "uuid": "3.4.0",
     "yargs": "^15.4.1",
+    "yoga-layout-prebuilt": "^1.9.6",
     "yurnalist": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "@types/hosted-git-info": "^3.0.1",
     "@types/yargs": "^15.0.8",
     "babel-preset-gatsby-package": "^0.5.3",
     "cross-env": "^7.0.2",
     "rimraf": "^3.0.2",
+    "ink": "^2.7.1",
+    "ink-spinner": "^3.1.0",
+    "npm-run-all": "4.1.5",
+    "react": "^16.8.0",
+    "rollup": "^2.23.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-internal": "^1.0.0",
     "typescript": "^3.9.7"
   },
   "files": [
@@ -77,10 +87,14 @@
     "directory": "packages/gatsby-cli"
   },
   "scripts": {
-    "build": "babel src --out-dir lib --ignore \"**/__tests__\" --extensions \".ts,.js,.tsx\"",
+    "build:babel": "babel src --out-dir lib --ignore \"**/__tests__\" --ignore \"src/reporter/loggers/ink/**/*\" --extensions \".ts,.js,.tsx\"",
+    "build:rollup": "rollup -c",
+    "build": "npm-run-all -p build:babel build:rollup",
     "prepare": "cross-env NODE_ENV=production npm run build && npm run typegen",
     "typegen": "rimraf \"lib/**/*.d.ts\" && tsc --emitDeclarationOnly --declaration --declarationDir lib/",
-    "watch": "babel -w src --out-dir lib --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
+    "watch:babel": "npm run build:babel -- --watch",
+    "watch:rollup": "npm run build:rollup -- -w",
+    "watch": "npm-run-all -p watch:babel watch:rollup",
     "postinstall": "node scripts/postinstall.js"
   },
   "engines": {

packages/gatsby-cli/rollup.config.js

@@ -0,0 +1,90 @@
+import resolve from "@rollup/plugin-node-resolve"
+import babel from "@rollup/plugin-babel"
+import commonjs from "@rollup/plugin-commonjs"
+import json from "@rollup/plugin-json"
+import replace from "@rollup/plugin-replace";
+import autoExternal from "rollup-plugin-auto-external"
+import internal from "rollup-plugin-internal"
+
+import path from "path"
+
+// Rollup hoists Ink's dynamic require of react-devtools-core which causes
+// a window not found error so we exclude Ink's devtools file for now.
+function excludeDevTools() {
+  const re = /ink/
+  return {
+    name: `ignoreDevTools`,
+
+    load(id) {
+      if (id.match(re)) {
+        if (path.parse(id).name === `devtools`) {
+          return { code: `` }
+        }
+      }
+    },
+  }
+}
+
+const extensions = [`.mjs`, `.js`, `.json`, `.node`, `.ts`, `.tsx`]
+
+export default {
+  input: `src/reporter/loggers/ink/index.tsx`,
+  output: {
+    file: `lib/reporter/loggers/ink/index.js`,
+    format: `cjs`,
+  },
+  cache: false,
+  plugins: [
+    replace({
+      values: {
+        "process.env.NODE_ENV": JSON.stringify(`production`)
+      }
+    }),
+    excludeDevTools(),
+    json(),
+    babel({
+      extensions,
+      babelHelpers: `bundled`,
+      skipPreflightCheck: true,
+      exclude: `node_modules/**`,
+      babelrc: false,
+      presets: [
+        [
+          "@babel/env",
+          {
+            "modules": false,
+            "shippedProposals": true,
+            "targets": { "node": "10.13.0" }
+          }
+        ],
+        "@babel/preset-react"
+      ],
+      plugins: ["@babel/plugin-transform-runtime"],
+      overrides: [
+        {
+          "test": ["**/*.ts", "**/*.tsx"],
+          "plugins": [["@babel/plugin-transform-typescript", { "isTSX": true }]]
+        }
+      ]
+    }),
+    resolve({
+      extensions,
+      dedupe: [ `react`, `ink` ]
+    }),
+    commonjs(),
+    autoExternal(),
+    internal([
+      `react`,
+      `ink`,
+      `ink-spinner`
+    ]),
+  ],
+  external: [
+    `yoga-layout-prebuilt`,
+    // Next one deserve explanation: ... it's because ink logger imports
+    // getStore, onLogAction from higher up (../../redux). But we don't want
+    // two copies of it - one bundled and one not, because it would result
+    // in multiple store copies
+    `../../redux`
+  ]
+}