From 00a24be0e6f5ee0bb7bfe990a50d9209f0803e0b Mon Sep 17 00:00:00 2001
From: Joel Chen <xchen@walmartlabs.com>
Date: Fri, 5 Feb 2021 17:24:00 -0800
Subject: [PATCH] [fix] babel-loader cache consider browserslistrc

---
 packages/xarc-webpack/src/partials/babel.ts   |  7 ++-
 .../util/generate-babel-loader-cache-id.ts    | 51 +++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/xarc-webpack/src/util/generate-babel-loader-cache-id.ts

diff --git a/packages/xarc-webpack/src/partials/babel.ts b/packages/xarc-webpack/src/partials/babel.ts
index a4b4bbca2..be8e992f8 100644
--- a/packages/xarc-webpack/src/partials/babel.ts
+++ b/packages/xarc-webpack/src/partials/babel.ts
@@ -4,6 +4,7 @@ import * as Path from "path";
 const identity = require("lodash/identity");
 const assign = require("lodash/assign");
 const babelLoader = require.resolve("babel-loader");
+import { generateBabelLoaderCacheId } from "../util/generate-babel-loader-cache-id";
 
 import { loadXarcOptions } from "../util/load-xarc-options";
 
@@ -39,6 +40,7 @@ module.exports = function(options) {
 
   const test = xarcOptions.babel.enableTypeScript ? /\.[tj]sx?$/ : /\.jsx?$/;
 
+  const cacheIdentifier = generateBabelLoaderCacheId(xarcOptions.cwd);
   const babelLoaderConfig = {
     _name: "babel",
     test,
@@ -47,7 +49,10 @@ module.exports = function(options) {
       {
         loader: babelLoader,
         options: Object.assign(
-          { cacheDirectory: Path.resolve(xarcOptions.cwd, ".etmp/babel-loader") },
+          {
+            cacheIdentifier,
+            cacheDirectory: Path.resolve(xarcOptions.cwd, ".etmp/babel-loader")
+          },
           options.babel
         )
       }
diff --git a/packages/xarc-webpack/src/util/generate-babel-loader-cache-id.ts b/packages/xarc-webpack/src/util/generate-babel-loader-cache-id.ts
new file mode 100644
index 000000000..da9fce8b7
--- /dev/null
+++ b/packages/xarc-webpack/src/util/generate-babel-loader-cache-id.ts
@@ -0,0 +1,51 @@
+import * as Fs from "fs";
+import * as Path from "path";
+
+/**
+ * Generate a cache identifier for babel-loader
+ *
+ * @param cwd - app dir
+ * @returns cache identifier
+ */
+export function generateBabelLoaderCacheId(cwd: string): string {
+  /*
+   * cacheIdentifier: Default is a string composed by the @babel/core's version,
+   * the babel-loader's version, the contents of .babelrc file if it exists,
+   * and the value of the environment variable BABEL_ENV with a fallback to
+   * the NODE_ENV environment variable. This can be set to a custom value to
+   * force cache busting if the identifier changes.
+   */
+  // @babel/core's version
+  // babel-loader's version
+  const pkgVersions = ["@babel/core", "babel-loader"].map(pkg => {
+    return require(`${pkg}/package.json`).version; // eslint-disable-line
+  });
+
+  let babelConfig;
+  let browsersListRc;
+  const dir = cwd || process.env.XARC_CWD || process.cwd();
+
+  try {
+    // content of babel.config.js
+    babelConfig = Fs.readFileSync(Path.join(dir, "babel.config.js"), "utf-8");
+  } catch {
+    //
+  }
+  // .browserslistrc content
+  try {
+    browsersListRc = Fs.readFileSync(Path.join(dir, ".browserslistrc"), "utf-8");
+  } catch {
+    //
+  }
+
+  return pkgVersions
+    .concat(
+      babelConfig,
+      process.env.BABEL_ENV,
+      process.env.NODE_NV,
+      browsersListRc,
+      process.env.BROWSERSLIST_ENV
+    )
+    .filter(x => x)
+    .join("\n");
+}